How to change checkbox border-color in flutter? By default, it is showing black but I want it in grey

Question

How to change checkbox border-color in flutter? By default, it is showing black but I want it in grey.

The default color of `unselectedWidget` is always grey. Still, you can prefer the solution given below to change the color. — Ayush Bherwani, Jan 08 '20 at 18:26

score 55 · Answer 1 · answered Oct 05 '21 at 17:59

55

Use this:

Checkbox(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(2.0),
  ),
  side: MaterialStateBorderSide.resolveWith(
      (states) => BorderSide(width: 1.0, color: Colors.red),
  ),
),

answered Oct 05 '21 at 17:59

chuxyz

567
5
2

Accepted answer did not work for me. This one is the only one that worked. – tudorprodan Nov 17 '22 at 15:04
This works for me for the selected checkbox border color. Thanks. – Yogesh Alai Nov 21 '22 at 05:47

score 43 · Accepted Answer · edited May 19 '22 at 17:26

43

CheckBox's border color comes from unselectedWidgetColor of your ThemeData.

Add following ThemeData to your MaterialApp

MaterialApp(
  title: 'Flutter Demo',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    unselectedWidgetColor: Colors.red, // <-- your color
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

If you don't want to add color to the MaterialApp's ThemeData then you can wrap your CheckBox widget with Theme widget, following is the code for your reference:

Theme(
    child: Checkbox(
      value: false,
      onChanged: (_) {},
    ),
    data: ThemeData(
      primarySwatch: Colors.blue,
      unselectedWidgetColor: Colors.red, // Your color
    ),
  ),

edited May 19 '22 at 17:26

General Grievance

4,555
31
31
45

answered Jan 08 '20 at 18:22

Kalpesh Kundanani

5,413
4
22
32

2

Great! Also do we have option to change the border of checkbox when it is selected? I want it this way -> For ex : tick color is green and checkbox border color is green with checkbox background as white. – Tanmay Pandharipande Aug 07 '20 at 08:53
how can we change checkbox width to 1 pixel? Thanks. – Kamlesh Jul 16 '21 at 07:53

score 11 · Answer 3 · answered Aug 28 '21 at 11:46

You can also simply set the side property of your Checkbox:

Checkbox(
      value: true,
      onChanged: (_) {},
      // Background color of your checkbox if selected
      activeColor: Colors.deepOrange,
      // Color of your check mark
      checkColor: Colors.black,
      shape: hasCircleShape
      // diplay checkbox with circle shape
          ? CircleBorder()
      // or make the border slightly rounded
          : RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5),
            ),
      side: BorderSide(
        // ======> CHANGE THE BORDER COLOR HERE <====== 
        color: Colors.grey,
        // Give your checkbox border a custom width
        width: 1.5,
      ),
    ),

score 10 · Answer 4 · answered Jan 08 '20 at 18:22

10

You can use Theme to change the unselected widget color like given below

Theme(
  data: ThemeData(unselectedWidgetColor: Colors.blue),
  child: Checkbox(
   ... 
   )
 )

answered Jan 08 '20 at 18:22

Ayush Bherwani

2,409
1
15
21

how can we change checkbox width to 1 pixel? Thanks. – Kamlesh Jul 16 '21 at 07:53

Tarish · Answer 5 · 2022-10-30T09:44:23.070

7

set color in BorderSide ⬇️

Checkbox(
    value: _value,
    onChanged: (_){},
    // YOUR COLOR HERE
    side: BorderSide(color: Colors.green)),

edited Oct 30 '22 at 09:44

answered Apr 15 '22 at 18:16

Tarish

468
8
8

score 4 · Answer 6 · answered Mar 10 '22 at 06:59

This code will help for border color change in onChanged Function.

Checkbox(
                    fillColor: MaterialStateProperty.all(Colors.transparent),
                    side: MaterialStateBorderSide.resolveWith((states) {
                      if(states.contains(MaterialState.pressed)){
                        return BorderSide(color: loginfontcolor);
                      }
                      else{
                        return BorderSide(color: loginfontcolor);
                      }
                    }),
                    checkColor: loginfontcolor,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
                    value: snapshot.tapval, onChanged: (val){
                      snapshot.changval= val!;
                    },
                    
                    )

score 3 · Answer 7 · answered Feb 27 '23 at 10:03

another dynamic way

 Checkbox(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(6.0).r,
            ),
            side: MaterialStateBorderSide.resolveWith(
              (states) => BorderSide(
                  width: 1.0,
                  color: valuefirst
                      ? context.resources.colors.primary600
                      : Color.fromRGBO(179, 172, 172, 1)),
            ),
            checkColor: context.resources.colors.primary600,
            activeColor: Colors.white,
            value: valuefirst,
            onChanged: (bool? value) {
              setState(() {
                valuefirst = value!;
                print('valuefirst$valuefirst');
              });
            },
          ),

score 2 · Answer 8 · answered Dec 08 '21 at 10:04

2

Simply like that:

        Checkbox(
          side: const BorderSide(
            // set border color here
            color: Colors.red,
          ),
          value: isChecked,
          onChanged: (bool? value) {},
        ),

answered Dec 08 '21 at 10:04

NayMak

160
1
16

score 2 · Answer 9 · answered Sep 06 '22 at 16:30

Checkbox(
            fillColor: MaterialStateProperty.all(consts.darkWhiteColor),
                side: MaterialStateBorderSide.resolveWith((states) {
                  if(states.contains(MaterialState.selected)){
                    return const BorderSide(color: consts.navyColor);
                  } else {
                    return const BorderSide(color: consts.greyColor);
                  }
                }),
                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(3.0))),
                value: checkValue.value,
                onChanged: widget.isDisabled
                    ? null
                    : (value) {
                        checkValue.value = value ?? false;
                        widget.onChanged!(value ?? false);
                      },
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                checkColor: consts.navyColor,
                activeColor: consts.darkWhiteColor,
              )

score 1 · Answer 10 · answered Jul 20 '21 at 01:25

Checkbox(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      value: true,
      onChanged: (newValue) {},

      /// Set your color here
      fillColor: MaterialStateProperty.all(Colors.grey),
    )

How to change checkbox border-color in flutter? By default, it is showing black but I want it in grey

10 Answers10

Linked