I have an API with an array list of values that passes values to my Radio button successfully. When I select each the select value parses but I'm unable to deselect the select radio button. Below is my flutter code:
ListView.builder( shrinkWrap:true,
physics:const NeverScrollableScrollPhysics(),
itemCount:dataOptions == null? 0: dataOptions.length,
itemBuilder:(BuildContext context,int index) {
return Container(
padding:
const EdgeInsets
.only(
bottom:
0.0),
child: Card(
elevation: 0,
child:
ListTile(
title: Text(
dataOptions[index]['option_title']),
leading:
Radio(
value: dataOptions[index]["option_price"],
//below will be the default value.
groupValue: dataOptions[index]["option_id"],
onChanged: (value) {
setState(
() {
dataOptions[index]["option_id"] = value;
debugPrint("radioSel:$value");
});
},
activeColor: Colors.green,
),
trailing:
Text(dataOptions[index]['option_price'].toString(), style:TextStyle(fontFamily: 'Montserrat',
color: colorPink, fontWeight: FontWeight.bold,
fontSize: 15,
),
),
)));
})
Since groupValue
stores the currently selected value and you use the individual dataOptions[index]["option_id"]
as groupValue
all radio buttons are independent from each other.
If this is intended, check out checkboxes as they are meant to be used for this behavior. CheckBox
To deselect a Radio
widget if another one in the group is selected do the following.
//Set default option if prefered
String? _groupValue;
Radio(
value: dataOptions[index]["option_price"],
groupValue: _groupValue,
onChanged: (value) {
setState(() {
_groupValue = value;
});
},
),