I have a checkbox that is iterate with a map, but when one checkbox is clicked, all the checkboxes are checked at same time, they are supposed to be individual checkboxes.
This is a picture and a code for better explanation
Image :
This is my code :
class _RejectJobConfirmationOptions2PopupState
extends State<RejectJobConfirmationOptions2Popup> {
bool _isChecked = false;
String _currText = '';
List<String> items = [
"Title",
"Quantity",
"Description",
"Your Phone Number",
"Due Date"
];
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Hero(
tag: heroRejectJobConfirmationOptions2PopupCard,
createRectTween: (begin, end) {
return CustomRectTween(begin: begin, end: end);
},
child: Material(
color: Colors.white,
elevation: 2,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
// These values are based on trial & error method
alignment: Alignment(1.05, -1.05),
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
color: Color(0xffECF0F1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.close,
color: Color(0xffB0BEC1),
),
),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 22.0, right: 22.0),
child: Text(
'Select a reason why you \nwant to reject this job',
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xff212121)),
),
),
Divider(
color: Color(0xff34495E).withOpacity(0.2),
),
Column(
children: items
.map((e) => Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Transform.scale(
scale: 1.3,
child: Checkbox(
side:
MaterialStateBorderSide.resolveWith(
(Set<MaterialState> states) {
if (states.contains(
MaterialState.selected)) {
return const BorderSide(
width: 2,
color: Color(0xff34495E));
}
return const BorderSide(
width: 1,
color: Color(0xffB0BEC1));
},
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(5)),
activeColor: Color(0xff34495E),
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity(
horizontal: -4, vertical: -4),
value: _isChecked,
onChanged: (value) {
setState(() {
_isChecked = value;
});
},
),
),
SizedBox(
width: 10,
),
Text(
e,
style: GoogleFonts.poppins(
color: Colors.black87,
fontSize: 12,
fontWeight: FontWeight.w400),
),
],
))
.toList(),
),
],
),
],
),
),
),
),
),
);
}
}
I tried to use if conditions but it gives me errors. Also i tried looking for information on using firstOrWhere but i am not implementing it properly
>Solution :
You need to have a list to control/hold the list items.
Create a state variable like
List<String> selected = [];
And checkbox value update will be
value: selected.contains(e),
onChanged: (value) {
if (selected.contains(e)) {
selected.remove(e);
} else {
selected.add(e);
}
setState(() {});
},
),