CheckBox value is always true in the onChanged callback - checkbox

Question

I'm trying to display an AlertDialog with a ListView of CheckBoxes with the code below:
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(' ', textAlign: TextAlign.right,),
content: Directionality(
textDirection: TextDirection.rtl,
child: Container(
height: 300.0,
width: 300.0,
child: new ListView.builder(
shrinkWrap: true,
itemCount: dropEntitiesList.length,
itemBuilder: (BuildContext context, int index) {
return new Row(
children: [
new Checkbox(
value: globals.entitiesFilter.contains(dropEntitiesList[index]),
onChanged: (bool newValue) {
setState(() {
dropEntitiesList[index].isClicked = !dropEntitiesList[index].isClicked;
if (dropEntitiesList[index].isClicked){
globals.entitiesFilter.add(dropEntitiesList[index].name);
}else{
globals.entitiesFilter.remove(dropEntitiesList[index].name);
}
});
print(globals.entitiesFilter);
}),
new Text(
dropEntitiesList[index].name,
style: TextStyle(fontSize: 16.0),
),
],
);
}),
),
),
actions: <Widget>[
new FlatButton(
child: new Text('انتهيت'),
onPressed: () {
Navigator.of(context).pop(true);
}),
new FlatButton(
child: new Text('إلغاء'),
onPressed: () {
Navigator.of(context).pop(false);
},
)
],
);
The onChanged's newValue parameter is always true. To see the checked CheckBoxes I need to close the dialog and then open it again, it will not change immediately when clicked .
How can I solve this?

Answer 1

Edit:
As the documentation for showDialog() states, you need to use a StatefulBuilder if the dialog needs to update. So wrap your Directionality widget in a StatefulBuilder:
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(' ', textAlign: TextAlign.right,),
content: StatefulBuilder(builder: (BuildContext context, StateSetter stateUpdater) {
return Directionality(..rest of code
}
Inside of the onChange() callback then use the StateSetter parameter to update the state:
stateUpdater(() {
dropEntitiesList[index].isClicked = !dropEntitiesList[index].isClicked;
// rest of the code
});
You are mixing some of the lists you use for state. For example, you set the value of the CheckBox based on the row's entity being present in the entitiesFilter list, but this will always be false because in the onChanged() method you update the entitiesFilter list only with the name from dropEntitiesList[index] not the entity itself. You can solve this by using:
value: globals.entitiesFilter.contains(dropEntitiesList[index].name),
(as I said you save only the name in the onChanged() method).