List of Radio button in flutter

Question

For my project i display a list of football game with the choice for the user of (3 radios buttons with value "1" "N" or "2").

Example : i need list of football game like that :

Arsenal-Tottenham 1 N 2 Liverpool-Manchester 1 N 2 PSG-Dortmund 1 N 2

1 N 2 are radio button, each member can so choose between the 3 value for each game. The problem is i Don't see how identify each radio button for be unique. I need at the end display a validation button which allows the members to save the result of each choice. For make simple if you choose 1 for the 3 games i need to pass "111" to an external server by php api

Here is my code for display the form with radio button : Note that the games are from a list (values.map), so number of games can vary

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';

// Create a Form widget.
class Affiche_grille extends StatefulWidget {
  @override
  _Affiche_grille_State createState() {
    return _Affiche_grille_State();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.

class _Affiche_grille_State extends State<Affiche_grille> {
  @override
  final _formKey = GlobalKey<FormState>();

  Future <List<Match>> Grille_display() async {
    // SERVER LOGIN API URL
    var url = 'http://www.axis-medias.fr/game_app/display_grid.php';

    // Store all data with Param Name.
    var data = {'id_grille': 1};

    // Starting Web API Call.
    var response = await http.post(url, body: json.encode(data));

    // Getting Server response into variable.

    var jsondata = json.decode(response.body);

    List<Match> Matchs = [];

    for (var u in jsondata) {
      Match match = Match(u["equipe1"],u["equipe2"],u["type_prono"]);
      Matchs.add(match);
    }

    return Matchs;
  }

  List<String> radioValues = [];

  @override
  Widget build(BuildContext context) {

    final appTitle = 'MONEYFREE';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: Container(
          child:
            FutureBuilder(
              future: Grille_display(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.data == null) {
                  return Container (
                    child: Center(
                      child: Text("Loading...")
                    )
                  );
                }
                else {
                List<Match> values = snapshot.data;
                values.forEach((m){
                  radioValues.add("N");
                  //like N or something
                });
                print('valeur radio après initialisation');
                print(radioValues);
                return Form(
                      key: _formKey,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          DataTable(
                            columnSpacing: 20,
                            columns: [
                              DataColumn(
                                label: Text("Libelle Match"),
                                numeric: false,
                                tooltip: "",
                              ),
                              DataColumn(
                                label: Text("1"),
                                numeric: false,
                                tooltip: "",
                              ),
                              DataColumn(
                                label: Text("N"),
                                numeric: false,
                                tooltip: "",
                              ),
                              DataColumn(
                                label: Text("2"),
                                numeric: false,
                                tooltip: "",
                              ),
                            ],
                            rows:
                            List.generate(values.length, (index) {
                              return DataRow(
                                  cells: [
                                    DataCell(
                                      Text(values[index].equipe1.toString() + " - " + values[index].equipe2.toString()),
                                    ),
                                    DataCell(
                                      Radio(
                                        value: "1",
                                        groupValue: radioValues[index],
                                        onChanged: (val) {
                                          setState(() {
                                            radioValues[index] = val;
                                            print('Change 1');
                                            print(radioValues);
                                          });
                                        },
                                      ),
                                    ),
                                    DataCell(
                                      Radio(
                                        value: "N",
                                        groupValue: radioValues[index],
                                        onChanged: (val) {
                                          setState(() {
                                            radioValues[index] = val;
                                            print(radioValues);
                                          });
                                        },
                                      ),
                                    ),
                                    DataCell(
                                      Radio(
                                        value: "2",
                                        groupValue: radioValues[index],
                                        onChanged: (val) {
                                          setState(() {
                                            radioValues[index] = val;
                                            print(radioValues);
                                          });
                                        },
                                      ),
                                    ),
                                  ]
                              );
                            }).toList(),
                          ),
                          Center(
                            child: RaisedButton(
                              color: Colors.green,
                              textColor: Colors.white,
                              padding: EdgeInsets.fromLTRB(9, 9, 9, 9),
                              child: Text('VALIDER VOTRE GRILLE'),
                              onPressed: () {
                                Valide_grille();
                              },
                            ),
                          ),
                        ],
                      )
                  );
                };
                },
            ),
        ),
      ),
      );
  }
  Future Valide_grille() async{
    // For CircularProgressIndicator.
    bool visible = false ;
    // Showing CircularProgressIndicator.
    setState(() {
      visible = true ;
    });

    // SERVER LOGIN API URL
    var url = 'http://www.axis-medias.fr/game_app/valide_grid.php';

    // Store all data with Param Name.
    var data = jsonEncode(radioValues);

    print(radioValues);
    // Starting Web API Call.
    var response = await http.post(url, body: json.encode(data));

    // Getting Server response into variable.
    var message = json.decode(response.body);

    // If the Response Message is Matched.
    if(message == 'OK')
    {
      print('VALIDATION DE LA GRILLE OK');
      // Hiding the CircularProgressIndicator.
      setState(() {
        visible = false;
      });

    }else{

      // If Email or Password did not Matched.
      // Hiding the CircularProgressIndicator.
      setState(() {
        visible = false;
      });

      // Showing Alert Dialog with Response JSON Message.
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: new Text(message),
            actions: <Widget>[
              FlatButton(
                child: new Text("OK"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }
  }

class Match {

  final String equipe1;
  final String equipe2;
  final String typeprono;

  const Match(this.equipe1, this.equipe2, this.typeprono);

}

Answer 1

If you want to create a list of Radio button use RadioListTile

For details check out this link: https://api.flutter.dev/flutter/material/RadioListTile-class.html

-- i hope this will be helpful for you

Answer 2

Create a global list

List<String> radioValues = [];

and assign each default value where you are assigning data to radios

values.forEach((m){
radioValues.add(/*assign default values here*/);
//like N or something
});

rows: List.generate(values.length, (index){
                          return DataRow(
                            cells: [
                              DataCell(
                                Text(values[index].equipe1.toString()+" - "+match.equipe2.toString()),
                              ),
                              DataCell(
                                Radio(
                                  value:"1",
                                  groupValue: radioValues[index],
                                  onChanged: (val) {
                                    setState(() {
                                      radioValues[index] = val;
                                    });
                                  },
                                ),
                              ),
                              DataCell(
                                Radio(
                                  value:"N",
                                  groupValue: radioValues[index],
                                  onChanged: (val) {
                                    setState(() {
                                      radioValues[index] = val;
                                    });
                                  },
                                ),
                              ),
                              DataCell(
                                Radio(
                                  value:"2",
                                  groupValue:radioValues[index],
                                  onChanged: (val) {
                                    setState(() {
                                      radioValues[index] = val;
                                    });
                                  },
                                ),
                              ),
                            ]
                              );
                        }).toList(),