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

Einkorn

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

Strage

This will make the Radio blue also when not selected. The following will fix this: disabledColor: template.ai == checkedAi ? Colors.blue : null, Thank you – Einkorn

Is it possible to change radio background color? #64166907 – Variometer

Answer 2

This is the most flexible answer:

fillColor: MaterialStateProperty.resolveWith((states) {
              // active
              if (states.contains(MaterialState.selected)) {
                return Colors.blue;
              }
              // inactive
              return Colors.grey.shade600;
            }),

You can control many different states (MaterialState).

Museum

Answer 3

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

Eloign

Answer 4

To change the radio unselected color:

unselectedWidgetColor: Colors.green,

To change radio selected color:

toggleableActiveColor: Colors.green,

Ultraism

Please provide complete example of the code you are providing – Colcannon