List of Radio button in flutter - 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

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

Answer 2

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 3

You can use Custom Radio group list package available on pub.dev
https://pub.dev/packages/custom_radio_group_list
If you want to Generate a radio button list using a list of string
Just pass list of string like this.
You can set selected item by just passing index of it.
RadioGroup(
radioList: sampleListString,
selectedItem: 1,
onChanged: (value) {
print('Value : ${value}');
},
disabled: true)
If you want to generate a radio button list using any Object.
Just turn that Object to a Map and create a list of Map and key whose data needs to be displayed.
Then use it like below.
RadioGroup(
radioListObject: sampleList,
textParameterName: 'data',
selectedItem: 1,
onChanged: (value) {
print('Value : ${value}');
} )