How to select specific radio button and get its value in ListView.builder Flutter

Issue

I would like to create a list of data that is called JSON with radio button. However, when I select any of the radio buttons it is selecting each and every radio button rather than selecting one. And, how can I get the selected radio button’s value when I click on the button?

I am new to flutter. Is it any solution can solve these type of problems?

Here is my code

Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Container(
            height: 270,
            color: Colors.white,
            child: CustomScrollView(
              slivers: [
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (context, i) {
                      return Column(
                        children: <Widget>[
                          Container(
                              width: 450,
                              padding: EdgeInsets.all(7.0),
                              margin: EdgeInsets.only(right: 8.0, left: 8.0, top: 10.0),
                              decoration: BoxDecoration(
                                border: Border.all(color: const Color(0xffededed)),
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget> [
                                  Text(modelOptions[i].optionName.toString(),
                                    style: TextStyle(
                                      fontSize: 18,
                                      color: Colors.amber,
                                    ),
                                  ),
                                ],
                              ),
                          ),
                          Container(
                              margin: EdgeInsets.only(left: 8.0, right: 8.0),
                              padding: EdgeInsets.all(7.0),
                              decoration: BoxDecoration(
                                border:
                                    Border.all(color: const Color(0xffededed)),
                              ),
                              child: ListView.builder(
                                  shrinkWrap: true,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemCount: modelOptions[i].modelOptionValues.length,
                                  itemBuilder: (context, j) {
                                    return
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.start,
                                        mainAxisSize: MainAxisSize.min,
                                      children: <Widget>[
                                        Radio(
                                            groupValue: selectedRadio,
                                            value: modelOptions[i].modelOptionValues[j].optionValueID,
                                            activeColor: Colors.orangeAccent,
                                            onChanged:(value) {
                                              setState(() {
                                                value = modelOptions[i].modelOptionValues[j].optionValueID.toString();
                                                selectedRadio = value;
                                                print("check radio: ${selectedRadio}");
                                                showToastMessage('${selectedRadio} is selected');  //get the selected radio button's value.
                                              });
                                            }),
                                              });
                                            }),
                                        Text(
                                          modelOptions[i].modelOptionValues[j].valueName,
                                          style: TextStyle(
                                            color: Colors.black, fontSize: 16,
                                        ),),
                                      ],
                                    );
                                  }))
                        ],
                      );
                    },
                    childCount: modelOptions.length,
                  ),
                ),
                
              ],
            )),
      ],
    ));
  }

Solution

                                        Radio(
                                            groupValue: selectedRadio,
                                            activeColor: Colors.orangeAccent,
                                            onChanged: (val) {
                                              setState(() {
                                                selectedRadio = val;
                                                showToastMessage(
                                                    "' the value ?? ' is selected"); //get the selected radio button's value.
                                              });
                                            }),

You’re using one source of truth for the Radio’s value selectedRadio. You should be updating the value for an index. Furthermore you’re passing the value to the groupValue parameter instead of the value parameter. groupValue is how you… toggle the group.

Answered By – Nico Spencer

Answer Checked By – Willingham (FlutterFixes Volunteer)