How to change radio's inactive color in Flutter?

Question

I have a Radio button inside a ListTile . When the ListTile is clicked, I change the Radio 's value. I don't want the radio to be clickable, so I don't provide an onChanged callback:

ListTile(
  onTap: () => onChanged(template.id),
  leading: Radio(
    value: template.id,
    groupValue: checkedId,
  )
  ...
)

Doing that, the Radio becomes "inactive" and changes it's color to grey. The Radio has an activeColor property, but not for inactive.

If I provide a dummy function to Radio 's onChanged property - it becomes active, but the problem is I don't want it to be clickable, I want the ListTile to be clickable only (the reason is - I want to be able to uncheck the Radio )

Also, I only want to change the inactive color of those specific Radio buttons, and not for the whole app.

Current Result:

Result with onChange (I can't uncheck the radio when clicking on it):

Answer 1

Radio uses unselectedWidgetColor of ThemeData . If you need to change it only for a few radios on a specific screen, wrap them in Theme widget to override a color:

Theme(
  data: Theme.of(context).copyWith(
    unselectedWidgetColor: Colors.red,
    disabledColor: Colors.blue
  ),
  child: Column(
    children: <Widget>[
      ListTile(
        onTap: () => setState(() => value = 0),
        leading: Radio(
          value: 0,
          groupValue: value,
          onChanged: (v) => setState(() => value = v),
        )
      ),
      ListTile(
        onTap: () => setState(() => value = 1),
        leading: Radio(
          value: 1,
          groupValue: value,
          onChanged: (v) => setState(() => value = v),
        )
      ),
    ],
  ),
)

If no callback passed in onChanged to Radio , it is interpreted as disabled (this works for many default material widgets).

Answer 2

You can also set the fillColor propery, it resolves a color for multiple radio states. In this case, it returns Colors.blue for all states.

Radio(
          fillColor: MaterialStateColor.resolveWith((states) => Colors.blue),
          value: 1,
          groupValue: _optionValue,
          onChanged: changeValue,
        )

Answer 3

To change the radio unselected color:

unselectedWidgetColor: Colors.green,

To change radio selected color:

toggleableActiveColor: Colors.green,