Changing the themeColor of CheckBoxListTile globally using material3

Issue

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:)

Answered By – BHARATH T

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *