CODEWITHSUNDEEP
fluttercheckboxflutter-layoutflutter-theme
Toai Quoc Ngo
Toai Quoc Ngo

Reputation: 1462

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

Upvotes: 5

Views: 6782

Answers (2)

emanuel sanga
emanuel sanga

Reputation: 945

Checkboxes have a property called fillColor

From the documentation, here is how to use it

Checkbox(
  value: true,
  onChanged: (_){},
  fillColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
    if (states.contains(MaterialState.disabled)) {
      return Colors.orange.withOpacity(.32);
    }
    return Colors.orange;
  })
)

Upvotes: 1

J. S.
J. S.

Reputation: 9625

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

Upvotes: 8

Related Questions