0

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,
                  ),
                ),
                
              ],
            )),
      ],
    ));
  }
Smile
  • 35
  • 7
  • You're thinking in an imperative fashion instead of a declarative one. You should already know the value and be applying that data to the radio button. – Nico Spencer Oct 15 '21 at 02:11
  • I don't quite understand what you are talking about. Is it I did wrong for my concept? – Smile Oct 15 '21 at 02:14
  • You shouldn't be asking anything for it's value, you should know the value and be applying that value to the thing. – Nico Spencer Oct 15 '21 at 02:18
  • but now when I click on one button, it selects all. – Smile Oct 15 '21 at 02:22
  • because you have once source of data `_isSelected` which is a bool. so they're all going to be set to that. you need a `List`. and update the index with the value. – Nico Spencer Oct 15 '21 at 02:39
  • I'll answer the question. – Nico Spencer Oct 15 '21 at 02:40
  • I think you can see the error now though right? you already have a collection of models. you need to store the value there. – Nico Spencer Oct 15 '21 at 02:45
  • I am not quite sure it is something like this? I had added the id for each choice for the value in the Radio. But, it will straight away show all buttons is selected even I didn't choose anything. – Smile Oct 15 '21 at 02:55
  • The code you posted is very complex and has a lot of dependencies for me to decipher what's happening. – Nico Spencer Oct 15 '21 at 02:56
  • What is see is this ``` Checkbox( checkColor: Colors.white, value: _isChecked, onChanged: (value) { setState(() { _isChecked = true; }); }),``` which is setting one value and applying one value to ALL Checkboxes – Nico Spencer Oct 15 '21 at 02:57
  • I am sorry to make you feel confused, but my question is on the Radio button. – Smile Oct 15 '21 at 02:59
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238159/discussion-between-nico-spencer-and-smile). – Nico Spencer Oct 15 '21 at 03:07

1 Answers1

0
                                        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.

Nico Spencer
  • 940
  • 6
  • 11