CODEWITHSUNDEEP
flutterdartmobile
Gora
Gora

Reputation: 93

Flutter unselect RadioListTile buttons

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

Upvotes: 5

Views: 4435

Answers (4)

Mohamed Jalal Jalal
Mohamed Jalal Jalal

Reputation: 36

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

Upvotes: 0

LeonardoZhu
LeonardoZhu

Reputation: 61

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

Upvotes: 6

kaarimtareek
kaarimtareek

Reputation: 496

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.

Upvotes: 2

Kahou
Kahou

Reputation: 3488

Wrap your RadioListTile with GestureDetector

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

Upvotes: 1

Related Questions