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);

}

Solution 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

Solution 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(),

Comments

[axis-medias]

I Don't understand your code :( For rows i have now : rows: values.map((match) => DataRow() and you put List.generate you Don't use my data it seems and what i need to put in : radioValues.add(/*assign default values here*/); i need to pit "N" if i want to set "N" as defaut value for the radio button ? So it creates a tab of radio with index and value ? Index comes from where exactly ??? Thanks

[axis-medias]

I have tested your code and it seems there is no syntax errors but when i display the result i see i can't change the value of radio button, it is selected by default on N value which is good but it doesn't work to change to other value when i click on 1 or 2 it does Nothing it is very Strange Thanks

[axis-medias]

I have tested the value of "val" and "index" and both are correct when i change radio button so i think the solution is near Onchanged seems to works but radio button doesn't change to 1 if i click on 1 it is Always N displayed Thanks

[axis-medias]

i have changed with your new code but problem is same. I have updated my first message with the full code. When i see the list all is selected to "N" and if i want change to "1" for example for the first match the radio button block and stay on "N"

[axis-medias]

Now it works after small corrections but i have an another problem which seems very Strange for me. I display the content of the table each time i change a value just for see if all is correct and here is the result. It seems the initialisation of table is done at the begin (correct) but when i change value of one radio button for "1" for example the initialisation is done again and 2 times… so the table which need contains 7 results contains 21 results after the correction of one radio button

[axis-medias]

I/flutter (23060): value table radio after init I/flutter (23060): [N, N, N, N, N, N, N] OK I/flutter (23060): Change first value radio button to 1 I/flutter (23060): [1, N, N, N, N, N, N] OK I/flutter (23060): The init code is again done and it adds 7 N radio button value I/flutter (23060): [1, N, N, N, N, N, N, N, N, N, N, N, N, N] I/flutter (23060): and it do again 2 times I/flutter (23060): [1, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N, N]

[axis-medias]

i Don't need to reassign it is the problem. The table need to be initialized to value "N" for all game by défaut. And when i change a value of radio button it need to change the value in the table (this part works) but after that the reinit code is called 2 times. Why that ? When we change the value of radio button in a form there is a refresh ? And why 2 refresh ?

[Naveen Avidi]

May be you are adding the value and not changing it by index !

[axis-medias]

i have found the solution :) I have code which is in the futurebuilder and each time you change Something future Builder and code is reloaded i need keep out the code of the futurebuilder

[Naveen Avidi]

Ok ! If my answer is helped you , please accept the answer !

[Naveen Avidi]

declare list values as global variable and while you are adding or assigning values check for that index !