How to fill color inside of checkbox in flutter?

1,363

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;
        });
      },
    ),
  ),
);
Share:
1,363
Haley Huynh
Author by

Haley Huynh

I am a high-talented iOS/Android/Web developer. I have been working for 5 years on iOS/Android/Web apps. I have excellent skills in Swift, Objective C, Java, Kotlin, Flutter, Dart, Javasript and many web frameworks like Laravel, React, Node, Angular, Vue.

Updated on December 25, 2022

Comments

  • Haley Huynh
    Haley Huynh over 1 year

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