Recently, when writing a page with Flutter , I need to use CheckBox. The style needs to be as shown in the figure. The

first thing that comes to my mind is to use the official CheckBox. Du Niang has searched a lot, and it is also a brief introduction to the official CheckBox, such as this one. This article: Flutter Checkbox checkbox , the introduction is quite detailed.

But after looking around, I found that the official CheckBox control can't meet my needs: Border can't specify width, CheckBox can't specify size.

Therefore, I had to find a third-party library myself , and finally found a satisfactory library on Github: round_check_box

You can specify border width, control size, selected Icon, etc., and the degree of customization is relatively high

use

existpubspec.yamladd dependencies on

dependencies:
  roundcheckbox: ^2.0.4+1

• 1
• 2

attached code

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(() {});
   }),

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

var check =  false ;

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Let's see the effect

unchecked state

checked status