how to make dynamic radio button with listview builder in flutter?

Question

I want to make it like attendance by giving attendance status to students.. the concept that I created was a listview builder with name data and then row by looping the number of radio buttons. However, I am quite confused about this problem

Section Radio

Row(
  children: [
    for(var i = 0; i < 2; i++)
    Radio<int>(
        value: i,
        groupValue: radioValue,
        activeColor: Colors.blueAccent,
        onChanged: handleRadioValueChanged
    ),
  ],
),

when I select a part of the list over the other parts follow and I am using listview builder for the above code

Answer 1

In the code below, I have dynamically shown how to create a list of radio buttons.

With the following code, you can create a unique style for radio button.

class RootPage extends StatefulWidget {
  const RootPage({Key key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  List<RadioItem> items = <RadioItem>[];
  int groupValue = 0; 

  @override
  void initState() {
     for (int i = 0; i < 10; i++) {
       items.add(RadioItem(index: i, name: 'radio ' + i.toString()));
     }
     super.initState();
  }
  
  @override Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
      children: items
          .map(
            (data) => Card(
              elevation: 3,
              shadowColor: const Color(0xFFAAAAAA),
              margin: const EdgeInsets.only(left: 30, right: 30, top: 15),
              color: Colors.white,
              shape: RoundedRectangleBorder(
                side: const BorderSide(color: Colors.transparent, width: 0),
                borderRadius: BorderRadius.circular(20),
              ),
              child: InkWell(
                borderRadius: BorderRadius.circular(20),
                onTap: () {
                  setState(() {
                    groupValue = data.index;
                  });
                },
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                  child: Directionality(
                    textDirection: TextDirection.rtl,
                    child: Row(
                      children: <Widget>[
                        Radio(
                          groupValue: groupValue,
                          value: data.index,
                          onChanged: (index) {
                            setState(() {
                              groupValue = index;
                            });
                          },
                        ),
                        Expanded(child: Text(data.name)),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )
          .toList(),
       ),
    );
  }
}

Then add the following class

class RadioItem {
  String name;
  int index;
  RadioItem({this.name, this.index});
}