Dynamically created checkbox in flutter not changing the state on clicked - flutter

Question

I am creating a checkbox field every time i press a button. but the generated checkbox is not changing the state when pressed, instead the next checkbox which is generated comes with the changed state.
I have attached the video of how it is working currently (https://imgur.com/a/75vE5cj )
my entire code goes like this :
class ToDoNotes extends StatelessWidget {
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return new MaterialApp(
title: 'notes',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: new T_notes(),
); }}
class T_notes extends StatefulWidget {
static String tag = 'T_notes';
#override
_T_notesState createState() => new _T_notesState();
}
this is my code for creating checkbox dynamically.
class _T_notesState extends State<T_notes> {
bool rememberMe = false;
void _onRememberMeChanged(bool newValue) => setState(() {
rememberMe = newValue;
});
List<Widget> _children = [];
int _count = 0;
String input;
int i=0;
void _add() {
_children = List.from(_children)
..add(
CheckboxListTile(
value: rememberMe,
onChanged: _onRememberMeChanged,
title: new Text(input,style: TextStyle(color: Colors.black)),
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.black,
)
);
setState(() {
++_count;
});
i++;
}
inside the widget build() inside the body i have the dynamic widget as:
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: ListView(
padding: EdgeInsets.all(28.0),
children: <Widget>[
SizedBox(height: 30),
new Row(
children: <Widget>[
SizedBox(width:0.2),
new Container(
width:200,
child: new TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(138.0)),
hintText: 'Enter the text',
),
onChanged: (val) {
input = val;
}
),
),
SizedBox(width:10),
new Container(
width: 80,
child:new Material(
borderRadius: BorderRadius.circular(30.5),
shadowColor: Colors.lightBlueAccent.shade100,
elevation: 1.0,
child: new MaterialButton(
onPressed: () {
_add();
},
child: Text('ADD', style: TextStyle(color: Colors.lightGreen,fontSize: 15)),
),
),
),
],
),
new Container(
height: 390,
child: ListView(children: _children),
),
],
) ,
);
}
I want the checkbox field to change the state properly on clicked.

Answer 1

Ok the thing here is that you need to have a model for each CheckboxListTile to preserve the state of each of the CheckboxListTiles.
This would be the model:
class ListTileModel {
bool enabled;
String text;
ListTileModel(this.enabled,this.text);
}
Then, when a user taps a Tile, just update the state of that particular row. What you have now is a general state for all your Tiles. So instead of having an array of widgets, have an array of models representing each row. And finally, use the a map function to build all your items
class _T_notesState extends State<T_notes> {
bool rememberMe = false;
List<ListTileModel> _items = [];
String input;
int i = 0;
void _add() {
_items.add(ListTileModel(false,input));
setState(() {});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: ListView(
padding: EdgeInsets.all(28.0),
children: <Widget>[
SizedBox(height: 30),
new Row(
children: <Widget>[
SizedBox(width: 0.2),
new Container(
width: 200,
child: new TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(138.0)),
hintText: 'Enter the text',
),
onChanged: (val) {
input = val;
}),
),
SizedBox(width: 10),
new Container(
width: 80,
child: new Material(
borderRadius: BorderRadius.circular(30.5),
shadowColor: Colors.lightBlueAccent.shade100,
elevation: 1.0,
child: new MaterialButton(
onPressed: () {
_add();
},
child: Text('ADD',
style:
TextStyle(color: Colors.lightGreen, fontSize: 15)),
),
),
),
],
),
new Container(
height: 390,
child: ListView(
children: _items
.map((item) => CheckboxListTile(
value: item.enabled,
onChanged: (enabled) {
item.enabled = enabled;
setState(() {});
},
title: new Text(item.text,
style: TextStyle(color: Colors.black)),
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.black,
))
.toList()),
),
],
),
);
}
}