CheckboxListTile state not changing when clicked inspite of calling setState - flutter

Question

I am creating a List of checkboxes using ListView and CheckboxListTile as below. However, when I click or unclick on an item, the CheckboxListTile does not update and reflect the check or uncheck.
The code creating the ListView is below:
void _showDialog(context) {
showDialog(
context: context,
builder: (context) {
return Material(
child: ListView(
children: this.selectionList.map((e) {
return CheckboxListTile(
value: e.isSelected,
title: Text(e.name),
onChanged: (value) {
setState(() {
e.isSelected = value ?? false;
});
});
}).toList()),
);
});
}
Also including the full code:
import 'package:flutter/material.dart';
import 'package:recipevault/models/user_profile.dart';
class MultiSelectComponent extends StatefulWidget {
List<Interest> displayList; //initial values are marked as selected=true
MultiSelectComponent({Key? key, this.displayList = const <Interest>[]})
: super(key: key);
#override
_MultiSelectComponentState createState() => _MultiSelectComponentState();
}
class _MultiSelectComponentState extends State<MultiSelectComponent> {
List<Interest> selectionList = <Interest>[];
#override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
this.selectionList = List.from(widget.displayList);
});
}
void _showDialog(context) {
showDialog(
context: context,
builder: (context) {
return Material(
child: ListView(
children: this.selectionList.map((e) {
return CheckboxListTile(
value: e.isSelected,
title: Text(e.name),
onChanged: (value) {
setState(() {
e.isSelected = value ?? false;
});
});
}).toList()),
);
});
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
GestureDetector(
onTap: () {
_showDialog(context);
},
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 1.2),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Select"),
Icon(Icons.arrow_downward),
],
),
),
),
Wrap(children: [
...selectionList
.where((element) => element.isSelected)
.map((e) => Chip(
label: Text(e.name),
onDeleted: () {
setState(() {
e.isSelected = false;
});
},
))
.toList(),
]),
]);
}
}
class Interest {
final String type, name;
final int id;
bool isSelected;
Interest(
{required this.id,
required this.name,
required this.type,
this.isSelected = false});
Interest.fromJson(Map<String, Object?> json)
: this(
id: json['id']! as int,
type: json['type']! as String,
name: json['name']! as String,
);
Map<String, Object?> toJson() {
return {
'id': this.id,
'type': this.type,
'name': this.name,
};
}

Answer 1

You have to extract the content of showDialog's builder to a separate StatefulWidget.