Flutter unselect RadioListTile buttons

user_6159798 0
Viewed 2943

I have been trying to figure out where my mistake is for days but still couldn't solve it. Absolute novice in Flutter and I building multiple choice quiz app. I have multiple choice question screen which imports the radiolisttile choices from radio_button.dart file shown below.

Everything works except I cannot unselect a button once it's selected. In other words if I click each button all of them are selected. 

 import "package:flutter/material.dart";

 class RB extends StatefulWidget {
 RB({this.choice, this.value});

 final String choice;
 final String value;

@override
_RBState createState() => _RBState();

}
class _RBState extends State<RB> {
bool dense=false;
 String _selection = '';
@override
Widget build(BuildContext context) {
return   Padding(
  padding: const EdgeInsets.all(8.0),
  child: Material(
    elevation: 5.0,
    child: RadioListTile(
      title: Text(widget.choice,  style: TextStyle(color: Colors.blue,),),
      value: widget.choice,
      groupValue: _selection,
      dense: dense,
      activeColor: Colors.green,
      onChanged:( val) { setState(() { _selection = val; print(val);}); },

    ),
  ),
 );
 }
}

Here the question_screen snippet
 Column(
 children: <Widget>[
 Container(child: RB(choice:'A',value:'All of above',)),
 Container(child: RB(choice:'B',value:'None of the above'))
dart flutter mobile
4 Answers

Now, in Sep, 2020, the correct answer should be using toggleable attribute.

RadioListTile(
            title: Text("xxx"),
            value: index,
            groupValue: _seletedIndex,
            toggleable: true,
            onChanged: (value) {
              onAlertChange(value, alert);
            },
          )
user_143617930

because you have create group value for every single widget ,you have to share the group value with each radio list tile not to create one for each radio button. 1- move the _selection variable up in the widget tree to be shared for each RB you have and pass it to every RB. 2-add another parameter to the RB class of type Function with string parameter and pass it to the onchanged parameter for each RB

your RB class will look something like this :

 class RB extends StatefulWidget {
 RB({this.choice, this.value,this.onchanged});
 final Function (String value) onChanged;
  final String groupValue;
 final String choice;
 final String value;

@override
_RBState createState() => _RBState();

}
class _RBState extends State<RB> {
bool dense=false;
 String _selection = '';
@override
Widget build(BuildContext context) {
return   Padding(
  padding: const EdgeInsets.all(8.0),
  child: Material(
    elevation: 5.0,
    child: RadioListTile(
      title: Text(widget.choice,  style: TextStyle(color: Colors.blue,),),
      value: widget.choice,
      groupValue: widget.groupValue,
      dense: dense,
      activeColor: Colors.green,
      onChanged:widget.onChanged,

    ),
  ),
 );
 }
}

now in the parent widget :

    Column(
     children: <Widget>[
     Container(child: RB(choice:'A',value:'All of 
       above',groupValue:"youValue",onChanged(value){
_selection = value;
setState((){});
})),

of course you should seperate the onchanged function to helper function for the seek of readability and flexibility.

user_81514680

Wrap your RadioListTile with GestureDetector

          GestureDetector(
            onTap: () {
              setState(() {
                _selection = '';
              });
            },
            child: RadioListTile(
            //...
user_127854900

RadioListTile(toggaleable: true)To unselect the selected radio item use toggleable: true, inside the RadioListTile()

user_161751060
Related