如何更改 flutter 中的复选框边框颜色？ 默认情况下，它显示为黑色，但我希望它为灰色

Question

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

Answer 1

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
    ),
  ),

Answer 2

Use this:

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

Answer 3

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

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

Answer 4

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,
      ),
    ),

Answer 5

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

Answer 6

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

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

Answer 7

Simply like that:

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

Answer 8

set color in BorderSide ⬇️

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

Answer 9

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,
              )