Flutter CheckBox 复选框自定义样式:圆形、大小、边框等

心已赠人 2023-10-09 13:48 29阅读 0赞

最近在用Flutter写一个页面的时候，需要使用到CheckBox，样式需要如图所示  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]  
首先想到的是使用官方的CheckBox，度娘搜了一大圈，也都是关于官方CheckBox的简单介绍，比如这篇文章 : [Flutter Checkbox 复选框][Flutter Checkbox]，介绍的还挺详细的。

但是看了一圈之后，发现官方的CheckBox控件无法满足我的需要 : Border无法指定宽度，CheckBox无法指定大小。

所以，只能自己去找第三方库了，终于在Github上找到了一个比较满意的库: [round\_check\_box][round_check_box]

可以指定边框宽度、控件大小、选中的Icon等等，自定义化程度比较高

#### 使用 ####

在`pubspec.yaml`上添加依赖

dependencies:
      roundcheckbox: ^2.0.4+1

附上代码

RoundCheckBox(
       size: 15,
       checkedWidget: const Icon(
         Icons.check,
         color: Colors.white,
         size: 10,
       ),
       checkedColor: Color(0xFF3C78FF),
       uncheckedColor: Color(0x003C78FF),
       border: Border.all(
           color: getCheckBoxBorderColor(),
           width: 1),
       isChecked: check,
       onTap: (selected) {
        
         this.check = selected!;
         setState(() {
        });
       }),

来看下效果

未勾选状态  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

已勾选状态  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16 2]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e2fe4480d40345aa813bb48b411dc941.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16
[Flutter Checkbox]: https://blog.csdn.net/ruoshui_t/article/details/93586543
[round_check_box]: https://github.com/rodrigobastosv/round_check_box
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5a116b0c1a59480795d17f794c3e0e34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/cc56ce8ee2f640739a15ece020d2eaa6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16