Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change radio's inactive color in Flutter?

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:

Demo 1

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

Demo 2

like image 398
HTMHell Avatar asked Dec 05 '19 12:12

HTMHell


People also ask

How do you customize radio button in flutter?

Since the radio button contains a label, we can't use the Radio button. Instead, we are going to create a custom class that can be used the create the options called MyRadioOption . Inspired by Flutter's Radio widget, the class has value , groupValue , and onChanged properties.

How do you deselect a radio button in flutter?

Use Radio's toggleable property. Documentation Set to true if this radio button is allowed to be returned to an indeterminate state by selecting it again when selected.

How do I turn off the radio in flutter?

the solution is to declare bool value evaluate in my case then on button click make that value true and setstate with that value and on the onChanged prop of the RadioListTile add this code: onChanged: (value) => evaluate ? null : value = 0, hope this was helpful!


1 Answers

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

like image 60
Igor Kharakhordin Avatar answered Sep 29 '22 17:09

Igor Kharakhordin