Flutter checkbox not deselecting after select-CodePudding

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

CodePudding user response：

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