Radio Button while using in List builder - flutter

Question

I faced problem of separating value of radio button . As I use multiple radio buttons in multiple list that i get from APi. so every time , when i select one radio button ,it selects all radio button of this type in all list. for example: radio 1 = check , radio 2 = unchecked in list 1 and list 2. i select radio 1 of list 1 but both radio 1 of list 1 and list 2 selected.
import 'dart:convert';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:http/http.dart' as http;
import 'package:progress_dialog/progress_dialog.dart';
import 'package:project40/Constants/APIConstants.dart';
import 'package:project40/Constants/styleConstant.dart';
import 'package:project40/screens/home_screen.dart';
import 'package:rflutter_alert/rflutter_alert.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:project40/api/add_filter_api.dart';
import 'package:project40/provider/add_post_provider.dart';
import 'package:provider/provider.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:project40/Constants/globals.dart' as globals;
class FilterScreen extends StatefulWidget {
#override
_FilterScreenState createState() => _FilterScreenState();
}
class _FilterScreenState extends State<FilterScreen> {
var jsonData;
//String filterVariable;
int school_everyone = 0;
bool all_Feed = true;
AddPostProvider _addPostProvider;
int length = 0;
int v = 0;
Future mySchools() async {
print("test");
//loading dialog appears
ProgressDialog pr;
pr = new ProgressDialog(context, showLogs: true);
pr.style(
progressWidget: Container(
width: 50,
child: Lottie.asset("assets/json/360-loader.json"),
),
message: 'Please wait...');
pr.show();
//api link
String url = baseURL + mySchoolURL;
//getting user token
SharedPreferences prefs = await SharedPreferences.getInstance();
String token = prefs.getString("token");
print(token);
//create post request
http.Response response = await http.get(url, headers: {
"Content-Type": "application/json",
'Authorization': 'Bearer $token',
}).catchError((e) => print(e));
print('successs');
pr.hide();
if (response == null) {
//appear dialog if any error will be occured
Alert(
context: context,
title: "",
type: AlertType.none,
desc: "Something went wrong. Please try again",
buttons: [
DialogButton(
child: Text(
"OK",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () {
Navigator.pop(context);
pr.hide();
},
width: 120,
)
],
).show();
} else {
jsonData = jsonDecode(response.body);
if (jsonData["status_code"] == 200) {
print(jsonData);
// if (all_Feed == true) {
// filterVariable = "All School";
// }
// print(filterVariable);
pr.hide();
//store the no of institutions
length = jsonData["data"].length;
setState(() {});
} else {
pr.hide();
//if error occured
Alert(
context: context,
type: AlertType.none,
title: "",
desc: jsonData["message"],
buttons: [
DialogButton(
child: Text(
"OK",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () {
Navigator.pop(context);
pr.hide();
},
width: 120,
)
],
).show();
}
}
return jsonDecode(response.body);
}
#override
void initState() {
super.initState();
mySchools();
if (all_Feed == true) {
school_everyone = 0;
}
if (school_everyone == 1) {
all_Feed = false;
}
// if (all_Feed == false) {
// setState(() {
// selectedRadio(2);
// });
// }
// if (school_everyone == 1) {
// setState(() {
// all_school = 0;
// });
// }
}
void selectedRadio(int value) {
setState(() {
all_Feed = false;
school_everyone = value;
});
}
#override
Widget build(BuildContext context) {
_addPostProvider = Provider.of<AddPostProvider>(context, listen: false);
return Material(
child: Scaffold(
backgroundColor: Colors.grey,
body: Stack(
//alignment: AlignmentDirectional.topCenter,
children: [
Container(
padding: EdgeInsets.only(top: 5),
decoration: BoxDecoration(
//borderRadius: BorderRadius.circular(50),
),
child: Padding(
padding: const EdgeInsets.only(top: 45),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
color: Colors.white,
),
child: Column(
children: [
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.arrow_back),
),
onTap: () {
Navigator.pop(context);
},
),
Text(
"Feed Filter",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "Roboto",
fontSize: 20,
fontWeight: FontWeight.bold),
),
Container(width: 32.0),
],
),
Divider(
thickness: 1,
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: GestureDetector(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomeScreen()));
},
child: allFilter(
Checkbox(
value: all_Feed,
activeColor: Colors.black,
onChanged: (value) {
setState(() {
all_Feed = value;
if (all_Feed == true) {
school_everyone = 0;
} else {
school_everyone = 1;
}
});
}),
Text(
"All school",
style: DayMoodRobotoStyle.heading5c,
)),
),
),
Expanded(
child: ListView.builder(
itemCount: length,
itemBuilder: (context, index) {
return SingleChildScrollView(
child: Container(
child: schoolUseage(
jsonData["data"][index]["institution"]
["name"] ??
"",
jsonData["data"][index]["institution"]
["none"] ??
"",
jsonData["data"][index]["institution"]
["_id"] ??
"",
jsonData["data"][index]["year"]["year"] ??
"",
jsonData["data"][index]["year"]["_id"] ??
"",
jsonData["data"][index]["program"] == null
? ""
: jsonData["data"][index]["program"]
["title"],
jsonData["data"][index]["program"] == null
? ""
: jsonData["data"][index]["program"]
["_id"],
index),
),
);
}),
),
InkWell(
onTap: () async {
// var response =
// await GetFilterPostAPI().getFilterPostApi(
// ids: globals.filterVariable,
// );
// print('add filter response$response');
// if (response['status_code'] == 200) {
// _addPostProvider.addPostProgress = false;
Navigator.pop(context);
Fluttertoast.showToast(
msg: 'Filter Add Successfully..');
// _addPostProvider.addPostProgress = false;
// } else {
// Fluttertoast.showToast(msg: response['message']);
// _addPostProvider.addPostProgress = false;
// }
},
hoverColor: Colors.transparent,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: 55.0,
margin: EdgeInsets.symmetric(
horizontal: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(28.0),
color: const Color(0xff0188ba),
boxShadow: [
BoxShadow(
color: const Color(0x333F51B5).withOpacity(0.2),
offset: Offset(0, 20),
blurRadius: 20,
),
],
),
child: Text(
'Filter',
style: DayMoodRobotoStyle.heading5,
textAlign: TextAlign.center,
),
),
),
SizedBox(
height: 20,
),
],
),
),
),
),
],
),
),
);
}
Widget schoolInfo(Radio icon, Expanded schoolname) {
return Row(
children: [icon, schoolname],
);
}
Widget allFilter(Checkbox icon, Text schoolname) {
return Row(
children: [icon, schoolname],
);
}
Widget schoolUseage(
String schooolName,
String school_id,
String _id,
String classOf,
String classof_id,
String department,
String department_id,
int index) {
String s1 = index.toString();
String s2 = school_everyone.toString();
String s = s1 + s2;
v = int.parse(s);
return Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
schooolName,
style: TextStyle(
color: all_Feed == true ? Colors.grey : Colors.blue,
fontSize: 17,
fontFamily: "Ubuntu",
letterSpacing: 0.17,
fontWeight: FontWeight.w700),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: all_Feed == true
? IgnorePointer(
ignoring: true,
child: schoolInfo(
Radio(
activeColor: Colors.black,
value: null,
groupValue: index,
onChanged: (value) {
selectedRadio(value);
globals.filterVariable =
"all_" + school_id + "program_" + _id;
}),
Expanded(
child: Text(
"Everyone",
style: TextStyle(
fontFamily: 'Ubuntu',
fontSize: 15,
color: Colors.grey,
letterSpacing: 0.17,
fontWeight: FontWeight.w700),
),
)),
)
: schoolInfo(
Radio(
activeColor: Colors.black,
value: 1,
groupValue: v,
onChanged: (value) {
setState(() {
// String s1 = index.toString();
// String s2 = value.toString();
// String s = s1 + s2;
// v = int.parse(s);
selectedRadio(value);
globals.filterVariable = "all_$_id";
});
}),
Expanded(
child: Text(
"Everyone",
style: DayMoodRobotoStyle.heading5c,
),
)),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: all_Feed == true
? IgnorePointer(
child: schoolInfo(
Radio(
activeColor: Colors.black,
value: 2,
groupValue: school_everyone,
onChanged: (value) {
selectedRadio(value);
}),
Expanded(
child: Text(
"None",
style: TextStyle(
fontFamily: 'Ubuntu',
fontSize: 15,
color: Colors.grey,
letterSpacing: 0.17,
fontWeight: FontWeight.w700),
),
)),
)
: schoolInfo(
Radio(
activeColor: Colors.black,
value: 2,
groupValue: v,
onChanged: (value) {
setState(() {
// String s1 = index.toString();
// String s2 = value.toString();
// String s = s1 + s2;
// v = int.parse(s);
selectedRadio(value);
globals.filterVariable = "none_" + _id;
});
}),
Expanded(
child: Text(
"None",
style: DayMoodRobotoStyle.heading5c,
),
)),
),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: all_Feed == true
? IgnorePointer(
child: schoolInfo(
Radio(
activeColor: Colors.black,
value: 2,
groupValue: school_everyone,
onChanged: (value) {
selectedRadio(value);
}),
Expanded(
child: Text(
department + " Only",
style: TextStyle(
fontFamily: 'Ubuntu',
fontSize: 15,
color: Colors.grey,
letterSpacing: 0.17,
fontWeight: FontWeight.w700),
maxLines: 2,
),
),
),
)
: schoolInfo(
Radio(
activeColor: Colors.black,
value: 3,
groupValue: v,
onChanged: (value) {
setState(() {
// String s1 = index.toString();
// String s2 = value.toString();
// String s = s2 + s1;
// v = int.parse(s);
selectedRadio(value);
globals.filterVariable = "program_" + _id;
});
}),
Expanded(
child: Text(
department + " Only",
style: DayMoodRobotoStyle.heading5c,
maxLines: 2,
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: all_Feed == true
? IgnorePointer(
child: schoolInfo(
Radio(
activeColor: Colors.black,
value: classof_id,
groupValue: school_id,
onChanged: (value) {
selectedRadio(value);
}),
Expanded(
child: Text(
"Class of " + classOf + " Only",
style: TextStyle(
fontFamily: 'Ubuntu',
fontSize: 15,
color: Colors.grey,
letterSpacing: 0.17,
fontWeight: FontWeight.w700),
),
)),
)
: schoolInfo(
Radio(
activeColor: Colors.black,
value: 4,
groupValue: v,
onChanged: (value) {
setState(() {
// String s1 = index.toString();
// String s2 = value.toString();
// String s = s2 + s1;
// v = int.parse(s);
selectedRadio(value);
globals.filterVariable = "year_" + _id;
//classOf + "_" + school_id;
});
}),
Expanded(
child: Text(
"Class of " + classOf + " Only",
style: DayMoodRobotoStyle.heading5c,
),
)),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: all_Feed == true
? IgnorePointer(
child: schoolInfo(
Radio(
activeColor: Colors.black,
value: all_Feed == true ? 0 : department_id,
groupValue: school_id,
onChanged: (value) {
selectedRadio(value);
}),
Expanded(
child: Text(
department + " - " + classOf,
style: TextStyle(
fontFamily: 'Ubuntu',
fontSize: 15,
color: Colors.grey,
letterSpacing: 0.17,
fontWeight: FontWeight.w700),
),
)),
)
: schoolInfo(
Radio(
activeColor: Colors.black,
value: 5,
groupValue: v,
onChanged: (value) {
setState(() {
// String s1 = index.toString();
// String s2 = value.toString();
// String s = s2 + s1;
// v = int.parse(s);
selectedRadio(value);
globals.filterVariable = "programyear_" + _id;
// department + classOf + "_" + school_id;
});
}),
Expanded(
child: Text(
department + " - " + classOf,
style: DayMoodRobotoStyle.heading5c,
),
)),
),
SizedBox(
height: 20,
),
],
);
}
}

Answer 1

Here is the minimum implementation of 2Radio button groups.
class _TestState extends State<Test> {
int group1Value;
int group2Value;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Radio"),
),
body: Column(
children: [
//Let suppose this is group 1
Row(
children: [
Radio(
value: 0,
groupValue: group1Value,
onChanged: (value) {
setState(() {
group1Value = value;
});
},
),
Expanded(child: Text("Radio1")),
],
),
Row(
children: [
Radio(
value: 1,
groupValue: group1Value,
onChanged: (value) {
setState(() {
group1Value = value;
});
},
),
Expanded(child: Text("Radio2")),
],
),
Row(
children: [
Radio(
value: 2,
groupValue: group1Value,
onChanged: (value) {
setState(() {
group1Value = value;
});
},
),
Expanded(child: Text("Radio3")),
],
),
SizedBox(height: 20),
Text(
"Second Group",
style: Theme.of(context).textTheme.subtitle1.copyWith(
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20),
//suppose this is group 2
Row(
children: [
Radio(
value: 0,
groupValue: group2Value,
onChanged: (value) {
setState(() {
group2Value = value;
});
},
),
Expanded(child: Text("Radio1")),
],
),
Row(
children: [
Radio(
value: 1,
groupValue: group2Value,
onChanged: (value) {
setState(() {
group2Value = value;
});
},
),
Expanded(child: Text("Radio2")),
],
),
Row(
children: [
Radio(
value: 2,
groupValue: group2Value,
onChanged: (value) {
setState(() {
group2Value = value;
});
},
),
Expanded(child: Text("Radio3")),
],
),
],
),
);
}
}
Here are the results