fluttercheckboxflutter-layoutflutter-theme

How to fill color inside of checkbox in flutter?


Here is what I am using for checkbox in flutter. But I can set only border color for unchecked state, not method found for fill color inside of the checkbox. Please help me with this.

Theme(
    data: ThemeData(unselectedWidgetColor: Colors.white),
    child: Checkbox(
        checkColor: Colors.blue,
        activeColor: Colors.white,
        value: rememberMe,
        onChanged: (value) {
            setState(() {
                rememberMe = value;
            });
        },
    ),
)

Solution

  • That is more related to design itself. An empty checkbox should be exactly that, empty. If you give it a fill color, you are kind of defeating the design purpose.

    Regardless, you could achieve this by putting it inside a Container with a background color and the width and height to only fill the CheckBox:

    return Center(
      child: Container(
        alignment: Alignment.center,
        width: 14,
        height: 14,
        color: Colors.blue,
        child: Checkbox(
          checkColor: Colors.blue,
          activeColor: Colors.white,
          value: rememberMe,
          onChanged: (value) {
            setState(() {
              rememberMe = value;
            });
          },
        ),
      ),
    );