Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Radio Button Unselected Color in Flutter

Tags:

flutter

When I have 2 radio buttons, where one is selected and the other isn't selected, one of them would be the active color, while the other is grey, so is there any way to change the unselected color from grey to white?

like image 257
Coder Avatar asked Aug 05 '18 22:08

Coder


People also ask

How do you change the unselected radio button color in Flutter?

To change radio button color in Flutter, add fillColor property to the Radio widget. Inside the fillColor use the MaterialStateColor to add the color of your choice.

How do I change the button color in press in Flutter?

To change the Elevated button color on pess, you can use the ButtonStyle widget. Inside the ButtonStyle widget you can add the overlayColor property and assign the color based on state such as on press, on hover and on focued.

How do I turn off RadioListTile Flutter?

To show the RadioListTile as disabled, pass null as the onChanged callback. This widget shows a pair of radio buttons that control the _character field. The field is of the type SingingCharacter , an enum.

How do you fill color in Flutter?

Steps to change TextField background color in FlutterStep 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget. Step 3: Inside the InputDecoration widget, add the filled parameter and set it to true .


2 Answers

Set unselectedWidgetColor prop of theme in MaterialApp like below:

return new MaterialApp(
      title: 'xyz',
      home: xyz(),
      theme: ThemeData(
        brightness: Brightness.dark,
        unselectedWidgetColor:Colors.white
      ),
    );

A useful tip that read the source code of radio.dart and you will get everything!

like image 131
JChen___ Avatar answered Oct 05 '22 11:10

JChen___


Sure, you have to change the ThemeData of the container of your Radio buttons.

Assuming that you are using a Row Container:

  Theme(
        data: ThemeData.dark(), //set the dark theme or write your own theme
                  child: Row(
          children: <Widget>[
            Radio(
              //your attributes here...
            ),
            Radio(
              //your attributes here...
            )
          ],
        ),
      )

How it works?

Because if you check the code of the ThemeData, you'll see this validation

unselectedWidgetColor ??= isDark ? Colors.white70 : Colors.black54;

then dark theme is using white70

like image 29
diegoveloper Avatar answered Oct 05 '22 13:10

diegoveloper