How to change border color of checkbox in flutter / dart

Question

I have a checkbox added to my UI in Flutter app, I can see checkbox color or active color property but can't find any option to change border color of checkbox , which is usually black.

Whats the provision or tweak to change the border color ?

Tried it but I was required to adjust the container as per the size of checkbox I didn't find it elegant — vishal dharankar, Dec 21 '19 at 18:12

score 57 · Accepted Answer · edited Dec 19 '19 at 07:19

57

Checkbox(value: false, tristate: false, onChanged: () {});
　　↓
Theme(
data: ThemeData(unselectedWidgetColor: Colors.red),
child: Checkbox(value: false, tristate: false, onChanged: (bool value) {}));

No onChanged, then the border will be grey(disabled).

edited Dec 19 '19 at 07:19

vishal dharankar

7,536
7
57
93

answered Dec 18 '19 at 07:24

kooskoos

4,622
1
12
29

Glad, I was able to help! – kooskoos Dec 19 '19 at 07:52
It should be mentioned, that the Checkbox requires the `onChanged` parameter, otherwise the inactive colors are used and ThemeData does not bring any changes – mixable Jun 14 '20 at 10:15

score 23 · Answer 2 · edited Oct 10 '22 at 09:28

23

You can do it by using side property...

side: BorderSide(color: Color(0xff585858)),

edited Oct 10 '22 at 09:28

Hossein Azem

331
3
8

answered Jun 19 '21 at 16:37

Huraira Awan

231
2
2

Simplest answer, thanks! The side property has preference over ThemeData and CheckboxThemeData. – Miguel Beltran Jul 02 '21 at 13:50

score 8 · Answer 3 · answered Apr 11 '21 at 11:50

is case you wanna define app-wide theme for your checkboxes you can do this:

MaterialApp(
   ...
  theme:ThemeData(
    checkboxTheme: CheckboxThemeData(
      fillColor: MaterialStateColor.resolveWith(
        (states) {
          if (states.contains(MaterialState.selected)) {
           return Colors.purple // the color when checkbox is selected;
            }
         return Colors.white //the color when checkbox is unselected;
         },
    ),
   ),
  ),
 )

it is a good practice to define app-wide theme for your app to avoid code duplication and ensure consistency it also provides better maintenance. enjoy coding:)

score 1 · Answer 4 · answered Jan 10 '22 at 10:47

Here is how you can change the color of text box outline

Checkbox(value: isChecked, onChanged: (val){
                      if(val != null) {
                        isChecked = val;
                        setState(() {
                        });
                      }
                    },checkColor: theme.primaryColor,
                    activeColor: theme.whiteColor,
                    hoverColor: theme.whiteColor,
                    side: BorderSide(
                      color: whiteColor, //your desire colour here
                      width: 1.5,
                    ),
                  ),

score 0 · Answer 5 · answered Dec 18 '19 at 07:43

You can do this:

        Container(
            decoration: const BoxDecoration(
              border: Border(
                top: BorderSide(width: 3.0, color: Colors.red),
                left: BorderSide(width: 3.0, color: Colors.red),
                right: BorderSide(width: 3.0, color: Colors.red),
                bottom: BorderSide(width: 3.0, color: Colors.red),
              ),
            ),
            child: Checkbox(value: false, onChanged: null),
            width: 20,
            height: 20),

The BoxDecoration class contains border property that will let you customize the border sides and then you can add a Checkbox and match the width and height of the container to the checkbox

ThemeData is a much more effective way of setting the border. — Sameen, Jun 19 '20 at 11:46

score 0 · Answer 6 · answered Oct 28 '21 at 20:33

0

Use side its simple.

Ex - side: BorderSide(color: Colors.red),

answered Oct 28 '21 at 20:33

Dinith

839
14
22

score 0 · Answer 7 · answered Oct 29 '21 at 05:11

 Transform.scale( //For Increasing or decreasing Sizes 
                  scale: 1.3,
                  child: Theme( // For Color Change, 
                    data: ThemeData(unselectedWidgetColor: AppColors.checkBoxBorderColor),
                    child: Checkbox(
                      value: true,
                      shape: RoundedRectangleBorder( // Making around shape
                          borderRadius: BorderRadius.circular(2)),
                      onChanged: (isCheck) {},
                      activeColor: AppColors.checkBoxActiveColor,
                    ),
                  ),
                ),

How to change border color of checkbox in flutter / dart

7 Answers7