Dynamically create radio button Group in ListView.builder() flutter

Question

I want to create such a UI

with in which ,in the last, i get the details of all the radio Buttons selected.

and this is My Full code

And when i tried to do this,all radio button are turned to one side.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Affiche_grille extends StatefulWidget {
  @override
  _QuestionWidgetState createState() => _QuestionWidgetState();
}

int selectedRadio;
int _groupValue = -1;

class _QuestionWidgetState extends State<Affiche_grille> {
  List<RadioModel> sampleData = new List<RadioModel>();

  @override
  void initState() {
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18', 'text1'));
    sampleData.add(new RadioModel(false, 'B', 'April 17', 'text2'));
    sampleData.add(new RadioModel(false, 'C', 'April 16', 'text3'));
    sampleData.add(new RadioModel(false, 'D', 'April 15', 'text4'));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: ListView.builder(
        itemCount: sampleData.length,
        itemBuilder: (context, index) => ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            _myRadioButton(
              title: "Checkbox 0",
              value: 0,
              onChanged: (newValue) => setState(() => _groupValue = newValue),
            ),
            _myRadioButton(
              title: "Checkbox 1",
              value: 1,
              onChanged: (newValue) => setState(() => _groupValue = newValue),
            ),
          ],
        ),
      ),
    );
  }
}

Widget _myRadioButton({String title, int value, Function onChanged}) {
  return Radio(
    value: value,
    groupValue: _groupValue,
    onChanged: onChanged,
  );
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  final String text;
  final String text1;

  RadioModel(this.isSelected, this.buttonText, this.text, this.text1);
}

This APPlication UI is made from this CODE.

score 2 · Answer 1 · answered May 04 '21 at 13:47

Radio is enabled when its value == groupValue in your case all 8 Radios are sharing one groupValue and for all row first one's value is 0 and second one's value is 1.

Then when you click left Radio globalValue is set to 0 then all the left Radios (their values are all 0) enabled and vice versa.

To create what you want to do, you should set unique values for each Radio and unique groupValue for each ROW

Here's an working example.

class Affiche_grille extends StatefulWidget {
  @override
  _QuestionWidgetState createState() => _QuestionWidgetState();
}

class _QuestionWidgetState extends State<Affiche_grille> {
  List<RadioModel> sampleData = [];
  List<int> groupValue = [];
  List<List<int>> value = [];

  @override
  void initState() {
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18', 'text1'));
    sampleData.add(new RadioModel(false, 'B', 'April 17', 'text2'));
    sampleData.add(new RadioModel(false, 'C', 'April 16', 'text3'));
    sampleData.add(new RadioModel(false, 'D', 'April 15', 'text4'));

    groupValue.add(0);
    groupValue.add(2);
    groupValue.add(4);
    groupValue.add(6);

    value.add([0,1]);
    value.add([2,3]);
    value.add([4,5]);
    value.add([6,7]);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: ListView.builder(
        itemCount: sampleData.length,
        itemBuilder: (context, index) => ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            Radio(
              groupValue: groupValue[index],
              value: value[index][0], 
              onChanged: (newValue) => setState(() => groupValue[index] = newValue),  
            ),
            Radio(
              groupValue: groupValue[index],
              value: value[index][1],
              onChanged: (newValue) => setState(() => groupValue[index] = newValue),  
            ),
          ],
        ),
      ),
    );
  }
}

Selected answers are current values of groupValue because you change the groupValue onchanged callback — hyobbb, May 05 '21 at 00:21

score 1 · Answer 2 · answered May 04 '21 at 14:02

According to the documentation:

If groupValue and value match, this radio will be selected. Most widgets will respond to onChanged by calling State.setState to update the radio button's groupValue.

In your case, each question represents one group of radios. You need to have a variable for the answer of each question. You can't hold all the answers with only one _groupValue variable.

So, each question needs to have 2 possible values, and they must be treated as one single group.

There are many ways you can do this, but one of them is like:

List<int> groupValues; //Will hold the selected answer for each Question

void initState() {
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18', 'text1'));
    sampleData.add(new RadioModel(false, 'B', 'April 17', 'text2'));
    sampleData.add(new RadioModel(false, 'C', 'April 16', 'text3'));
    sampleData.add(new RadioModel(false, 'D', 'April 15', 'text4'));
    groupValues = List.filled(sampleData.length, -1); // Fills the initial value.
  }

You can give the Group values to the Radio's based on their index:

Widget _myRadioButton({String title, int value, Function onChanged, int index}) {
  return Radio(
    value: value,
    groupValue: groupValues[index],
    onChanged: onChanged,
  );
}

Remember the onChanged callback needs to be called with the updated index aswell:

onChanged: (newValue) => setState(() => groupValues[index]= newValue),
index: index,

Just as an extra tip, this creates a dependency on your widget with your screen. It's ok since its an example, but widgets should be independent. So the group value should be something passed from the widget, and not a global variable in your file. I've done this way to make it closer to your given example.

Dynamically create radio button Group in ListView.builder() flutter

2 Answers2

Linked