state seems to switch from widget to widget - flutter

Question

I was building a todo list app which uses a ListView.builder to render multiple task widgets which have three properties, title, checked, and starred. It works just fine until I star/check an existing task and add a new task, in which case the state of the previous task seems to jump to the newly added task. What could be causing the problem? Could this have something to do with keys?
class Main extends StatefulWidget {
#override
State<Main> createState() => _MyAppState();
}
class _MyAppState extends State<Main> {
var todoList = [];
var stars = 0;
void addStar() {
setState(() {
stars++;
});
}
void removeStar() {
if (stars > 0) {
setState(() {
stars--;
});
}
}
void addTodo(title) {
setState(() {
todoList.add(title);
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
floatingActionButton: Builder(builder: (context) {
return FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return NewTodo(addTodo: addTodo);
});
},
);
}),
body: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'My Day',
style:
TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
Container(
child: Row(
children: [
const Text(
'IMPORTANT: ',
style: TextStyle(
fontSize: 16.0,
letterSpacing: 1.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 58, 58, 58),
),
),
Text(
'$stars',
style: const TextStyle(
fontSize: 24.0,
letterSpacing: 1.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 253, 147, 8)),
),
const SizedBox(width: 20.0),
IconButton(
icon: Icon(Icons.more_vert, size: 24),
onPressed: () => {print('more ...')},
),
],
),
)
],
),
),
Expanded(
// height: 300,
child: todoList.length == 0
? Text('No Tasks Yet 💪',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w600,
color: Colors.grey))
: ListView.builder(
itemCount: todoList.length,
itemBuilder: (context, index) {
return Todo(
title: todoList[(todoList.length - 1) - index],
addStar: addStar,
removeStar: removeStar);
}))
],
),
),
),
);
}
}
the app currently only has three files, below is a link to the gist.
https://gist.github.com/FENETMULER/eb4a898b82f9aa4c6a871a1fa9833c84

Answer 1

Change your logic like
: ListView.builder(
itemCount: todoList.length,
itemBuilder: (context, index) {
return Todo(
title: todoList[index], //this
addStar: addStar,
removeStar: removeStar);
},
),

Answer 2

In your code, you have this line:
title: todoList[(todoList.length - 1) - index],
Let's imagine you have 3 items in the list list = [1,2,3]; The ListView.builder should iterate through them by saying
itemBuilder: (context, index) {
return Text(list[index].toString());
},
This way, the ListView.builder Widget will return a text with '1', '2' and '3' in this order since you call list[index] for the length of list (3 times) and each time index increments (starting from 0) so you call list[0], list[1] and list [2] (which return the three texts '1', '2' and '3'.) You, however, call list[(list.length-1) - index], so when index iterates from 0 to 2 you get:
list [ 3 - 1 - 0 ] = list [2] = text '3'
list [ 3 - 1 - 1 ] = list [1] = text '2'
list [ 3 - 1 - 2 ] = list [0] = text '1'
with this you can clearly see that you get a reverse list, hence, if you use list.reversed, you will get the correct list.

Answer 3

The solution is to use Keys with a ListView and not a ListView.builder as it doesn't seem to work with ListView.builder, the problem actually comes from reversing the list, since when the list is reversed every time a new task is added the objects in the Widget Tree won't be in line with their corresponding Object in the Element Tree.
ListView(children: todoList.reversed.map((title) => Todo(title: title, key: ValueKey(title))).toList())