flutterradio-buttonradio-groupradiobuttonlist

Flutter checkbox not deselecting after select


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



Solution

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