How to unselect a radio button in flutter?

Question

I use a map for radio, a textfield, text that displays a result and a button for clear all.

The TextField can be erased:

RaisedButton(onPressed: () { _controllerTextField.clear();},
                  child: Text('Clear',style:Theme.of(context).textTheme.body2.merge(TextStyle(color: Colors.white)),),)

But i don't understand how to erase my Text and put my Radio on default deselected state.

More, when a radio is selected, I give it a custom color but I can not give the same color to the Radio icon.

Do you have an idea of the method to use?

Thank you

Answer 1

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.

Answer 2

Thank you Karim for your suggestion.

Sorry, I was busy with other things. Finally, I did that:

onPressed: () {
    _controller.clear();
    setState(() {
    radioSelectionne = 3;
     nombreTextField = null;
     Resultat = null;});
     },

And for the color of the radio: In my Main file -> ThemeData -> unselectedWidgetColor

Everything is as I wished.

Thanks for your help.

Answer 3

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  Test({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  final TextEditingController _controllerTextField =  TextEditingController();


  double nombreTextField;
  int radioSelectionne;
  int resultat;

  Map coefMultipicateur = {
    0: 'x 2',
    1: 'x 5',
    2: 'x 10',
  };


  @override
  Widget build(BuildContext context) {
    return  GestureDetector(
      onTap: (() => FocusScope.of(context).requestFocus(FocusNode())),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.only(left:10.0, right: 10.0),
            child: Column(
              children: <Widget>[
                Container(
                    margin: EdgeInsets.only(top: 10.0, bottom: 50.0),
                    child:
                    Row(
                      children: <Widget>[
                        Expanded(
                            flex:6,
                            child: Text('entrer nombre :',
                              style:Theme.of(context).textTheme.body2.merge(
                                  TextStyle(
                                      fontSize: 16)),
                            )
                        ),
                        Expanded(
                          flex: 4,
                          child: TextField(
                            controller: _controllerTextField,
                            keyboardType: TextInputType.number,
                            onChanged: (String string) {
                              setState(() {
                                nombreTextField = double.tryParse(string);
                              });
                            },
                            decoration: InputDecoration(
                              labelText: 'entrer nombre',
                            ),
                          ),
                        )
                      ],
                    )
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 20.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        flex: 3,
                        child: Container(
                          color: Colors.blue,

                          child:columnRadio(),
                        ),
                      ),
                      Expanded(
                          flex: 7,
                          child: Center(
                              child: Column(
                                children: <Widget>[
                                  Text('resultat\n= ',
                                    textAlign: TextAlign.center,
                                    style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.blueGrey)),),
                                  Container(
                                    margin: EdgeInsets.only(bottom: 10.0),
                                    child: Text(nombreTextField == null || radioSelectionne == null ? '' : '$resultat',
                                      style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.green)),),
                                  ),
                                ],
                              )
                          )
                      )
                    ],
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(top: 50.0),
                    child: RaisedButton(
                      onPressed: () {
                        _controllerTextField.clear();
                      },
                      color: Colors.blue,
                      child: Text('Clear',
                        style:Theme.of(context).textTheme.body2.merge(TextStyle(color: Colors.white)),
                      ),
                    )
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Column columnRadio() {
    List<Widget> pourcentages = [];
    coefMultipicateur.forEach((key, value) {
      Row listePourcentages = Row(
        children: <Widget>[
          Radio(
              activeColor: Colors.white,
              value: key,
              groupValue: radioSelectionne,
              onChanged: (Object i) {
                setState(() {
                  radioSelectionne = i;
                  if (nombreTextField != null) {
                    switch (radioSelectionne) {
                      case 0:
                        resultat = (nombreTextField * 2).toInt();
                        break;
                      case 1:
                        resultat = (nombreTextField * 5).toInt();
                        break;
                      case 2:
                        resultat = (nombreTextField *  10).toInt();
                        break;
                    }
                  }
                });
              }),
          Text(value,
              style: TextStyle(
                  color: (radioSelectionne == key) ? Colors.white : Colors.blue[200],
                  fontWeight: FontWeight.bold)),
        ],
      );
      pourcentages.add(listePourcentages);
    });
    return Column(
      children: pourcentages,
    );
  }
}

Answer 4

If you can only select one option; Specify groupValue to the radio buttons

Example:

const TYPE_DOG = 1
const TYPE_CAT = 2

                      Radio(
                        value: TYPE_DOG,
                        groupValue: type,
                        onChanged: (value) => setState(() => type = value),
                      ),
                      Radio(
                        value: TYPE_CAT,
                        groupValue: type,
                        onChanged: (value) => setState(() => type = value),
                      ),

then in the onPressed set this value to 0;