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