Search code examples
flutterflutter-theme

Changing the themeColor of CheckBoxListTile globally using material3

In Flutter documentation, it's given

The Material widgets Switch, SwitchListTile, Checkbox, CheckboxListTile, Radio, RadioListTile now use ColorScheme.secondary color for their toggleable widget. ThemeData.toggleableActiveColor is deprecated and will eventually be removed.

But CheckboxListTile is using ColorScheme.primary for the toggleableActiveColor instead of ColorScheme.secondary

My Main Theme:

ThemeData(
   material3 : true,
   colorScheme: ColorScheme.fromSeed(
     seedColor: DesignColor.green,
     primary: DesignColor.green,
     onPrimary: DesignColor.primaryTextColor,
     secondary: DesignColor.yellow,
     onSecondary: DesignColor.white))

My CheckboxListTile:

CheckboxListTile(
      controlAffinity: ListTileControlAffinity.leading,
      title: Text(range999),
      value: values[1],
      onChanged: (val) {})

Output:

enter image description here

Note: The documentation works if i remove usematerial3:true

Solution

  • there is a checkboxTheme property inside ThemeData.

    You can update something like this.

    checkboxTheme: CheckboxThemeData(
      fillColor: MaterialStateProperty.all<Color>(Colors.purple),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      side: BorderSide(color: Colors.grey.shade100, width: 1.5),
    ),

    Happy coding:)