[移动开发] Flutter CheckBox 复选框自定义样式:圆形、大小、边框等

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Flutter CheckBox 复选框自定义样式:圆形、大小、边框等 -> 正文阅读

[移动开发]Flutter CheckBox 复选框自定义样式:圆形、大小、边框等

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

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

所以，只能自己去找第三方库了，终于在Github上找到了一个比较满意的库: 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(() {});
   }),

var check = false;

getCheckBoxBorderColor() {
    if (check) {
      return const Color(0xFF3C78FF);
    } else {
      return const Color(0xFFD1D1D1);
    }
  }