flutter CheckboxListTile loses checked state when scroll - flutter

Question

I am trying to use CheckboxListTile in a popup widget so the user can check as many items as needed and then click OK to accept the checked items which adds them to a list of items in main widget
What happens is CheckboxListTile loses checked state when scrolling down for some items, when getting back up in the list it is not checked anymore,
here is my code for the CheckboxListTile
class ItemTileWithImage extends StatefulWidget {
final Model model;
ItemTileWithImage(this.model);
#override
_ItemTileWithImageState createState() => _ItemTileWithImageState();
}
class _ItemTileWithImageState extends State<ItemTileWithImage> {
bool _checked = false;
#override
Widget build(BuildContext context) {
Color hintColor = Theme.of(context).hintColor;
Color primaryColor = Theme.of(context).primaryColor;
return Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
height: 85,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: hintColor, width: 0.5),
),
),
child: CheckboxListTile(
activeColor: primaryColor,
checkColor: Colors.white,
value: _checked,
onChanged: (val) {
setState(() {
_checked = val;
});
if (val) {
Provider.of<OrderProvider>(context, listen: false)
.insertModelItems(widget.model.code);
} else {
Provider.of<OrderProvider>(context, listen: false)
.removeModelItems(widget.model.remoteId);
}
},
secondary: widget.model.imageUrl != null
? CachedNetworkImage(
height: 80,
width: 60,
imageUrl: widget.model.imageUrl,
progressIndicatorBuilder: (context, url, downloadProgress) {
return Center(
child: Container(
width: 30,
height: 30,
child: CircularProgressIndicator(
value: downloadProgress.progress,
backgroundColor: primaryColor,
strokeWidth: 2,
),
),
);
},
errorWidget: (context, url, error) => Icon(Icons.error),
)
: Image.asset(
'assets/images/mini_logo.png',
width: 50,
height: 50,
),
title: Text(widget.model.code ?? '${widget.model.barCode}'),
subtitle: Text(
widget.model.name ?? '',
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
);
}
}

Answer 1

Flutter apps typically 'clean up' your off screen state. Some off-screen widgets will experience the loss of certain view related attributes. This is discussed some in the Keys section here. You can instantiate stateless widgets in a way where their variable attributes are stored off for later recall.
Here is a demo utilizing rows of CheckboxListTile widgets which keep their state even with scrolling/going off-screen. You can use a DartPad of the below code here.
// Remember CheckboxListTile status with scrolling demo.
// Currently utilizes rows in implementation.
// This can be cut down to maintain a single checkbox list tile.
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(
home: Home(),
));
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
// Refresh Callback for descendant widgets (if checkboxes are generated in seperate widget)
refresh() {setState(() {});}
// Rows with checkbox title and check value
// Must update second value in entry to maintain check status while scrolling
List<List> rowData = [
['row1', true], ['row2', false], ['row3', false],
['row4', false], ['row5', false], ['row6', false],
['row7', false], ['row8', false], ['row9', false],
['row10', false], ['row11', false], ['row12', false],
['row13', false], ['row14', false], ['row15', false],
['row16', false], ['row17', false], ['row18', false],
['row19', false], ['row20', false], ['row21', false],
['row22', false], ['row23', false], ['row24', false]];
List<Row> rows = []; // Holds row objects generated from rowData (with checkboxes)
int row = 0;
int rowCount = 0;
#override
Widget build(BuildContext context) {
rows = []; // Refresh rows
for (int i=0; i<rowData.length; i++) { // Init/refresh row widgets
rows.add(Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded (
child: CheckboxListTile(
value: rowData[i][1] as bool, // Check value
title: SizedBox(
width: 100,
child: Text(rowData[i][0], style: const TextStyle(fontSize: 50))
), // Title for check box
checkColor: Colors.black,
dense: false,
onChanged: (newValue) { // On click of check box
setState(() {
print("Checkbox clicked");
rowData[i][1] = newValue; // Update value in the RowData list
});
}
),
)
]
));
}
return Scaffold(
appBar: AppBar(
title: const Text('Remember Checkboxes Demo'),
centerTitle: true,
backgroundColor: const Color(0xff66b366),
),
body: Column (
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[for (var i in rows) i,] // Fill in rows
),
)
]
)
);
}
}
Abstracting the idea for the question's implementation, you can replace your _checked variable to be a passed in boolean from the parent of the ItemTileWithImage widget. Also, you would want to pass in a function, like the refresh() function in the demo, to call in the onChange block after updating your shared check value. This allows you to refresh the state of your parent widget to include the updated check status.
Note: I am a relative novice with Flutter so apologies if this solution is considered bad practice.
The above implementation was developed with Flutter 2.5.3 and Dart 2.14.4.