How to keep the border after the checkbox is active/selected in flutter

Question

So what I have right now is , borderless check box when checked

What I want to achieve is , a bordered checkbox when checked

This is my code for the checkbox i have:

Checkbox(
          value: _isChecked,
          onChanged: (bool value) {
            setState(() {
              _isChecked = value;
            });
           },
          checkColor: Colors.pinkAccent,
          activeColor: Colors.transparent,
        ),
Text("Remember me")

Answer 1

you can wrap it in a container and set a border for it
How to add a border to a widget in Flutter?
then you can use theme(unselectedwidgetcolor:)to change the default border of checkbox
change checkbox border-color in flutter
then according these question we can use both ,to achieve what we want

bool _isChecked = false;

then we can define our check box and say if isChecked was equal by true ,color would be pink accent if not change it to white by a ternary if

  Container(
            decoration: BoxDecoration(
              border: Border.all(
                  color: _isChecked == true ? Colors.pinkAccent: Colors.black,
                  width: 2.3),
            ),
            width: 24,
            height: 24,
            child: Theme(
              data: ThemeData(unselectedWidgetColor: Colors.white),
              child: Checkbox(
                checkColor: Colors.pinkAccent,
                activeColor: Colors.transparent,
                value: _isChecked,
                tristate: false,
                onChanged: (bool isChecked) {
                  setState(() {
                    _isChecked = isChecked;
                  });
                },
              ),
            ),
          ),

with code above you would get something like this

you can also change the pink border to whatever you want

Answer 2

If you want to do this using Theme, you can override it like this:

runApp(MaterialApp(
  theme: ThemeData(
    checkboxTheme: CheckboxThemeData(
      checkColor: MaterialStateProperty.resolveWith((_) => Colors.black),
      fillColor: MaterialStateProperty.resolveWith((_) => Colors.transparent),
      side: AlwaysActiveBorderSide(),
    ),
  ),
));

class AlwaysActiveBorderSide extends MaterialStateBorderSide {
  @override
  BorderSide? resolve(_) => const BorderSide(color: Colors.black54);
}

Answer 3

Using MaterialStateBorderSide you can achieve the expected view

bool state = false;


 Checkbox(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
              activeColor: Colors.pink,
              checkColor: Colors.white,
              side: MaterialStateBorderSide.resolveWith(
                (states) => const BorderSide(color: Colors.white),
              ),
              value: state,
              onChanged: (value) {
                setState(() {
                  state = value!;
                });
              },
            ),