I want to add two paired radio buttons of (present and absent) in a list view builder of (students). students attendence list view

So far I was able to create a list view builder with the paired Radio buttons at each list row as:

Expanded(
        flex: 9,
        child: ListView.builder(
          itemCount: listStudents.length,
          itemBuilder: (_, index) {
            
            return Container(
              margin: const EdgeInsets.all(8),
              padding: const EdgeInsets.symmetric(horizontal: 15),
              // alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.white70,
                borderRadius: BorderRadius.circular(15)
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Wrap(
                    children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SmallText(text: listStudents[index].name!, fontFamily: 'Poppins'),
                      ],
                    ),
                    ],
                  ),
                  Wrap(
                    children: [
                    Radio(
                        value: "absent$index", 
                        groupValue: attendenceValue, 
                        fillColor: MaterialStateColor.resolveWith((states) => Colors.redAccent),
                        onChanged: (val) {
                          setState(() {
                            attendenceValue = val.toString();
                          });
                        },
                    ),
                    Radio(
                        value: "present$index", 
                        groupValue: attendenceValue, 
                        fillColor: MaterialStateColor.resolveWith((states) => Colors.greenAccent),
                        onChanged: (val) {
                          setState(() {
                            attendenceValue = val.toString();
                          });
                        },
                    ),
                    ],
                  ),
                ],
              ),
            );
          }
        ),
      )

Aim is the selection must be between the two paired Radio buttons per row in the list (meaning If I mark the first student present and go the next one, the first selection should still be there). But instead selection changes throughout the list (previous selections does not persist)

Please kindly assist

CodePudding user response：

That's because the same groupValue for radio buttons are used for all list items. You should also use a list of attendanceValue with the same items of listStudents list.

Think of a pair of radio buttons as a pair of true or false buttons. For an item,if true is clicked, false can't be clicked. So, these two buttons must share some logic. Here comes groupValue. If one of the radio buttons is clicked, it searches for same groupValue property and sets the clicked button's property to true and other buttons to false.

Here's what I've modified your code. Have Fun TT

https://dartpad.dev/?id=4e534fba753e188ca4c08ae0cbf6273e