Stack Overflow Asked by Ruchita Bhaskar on November 18, 2021
I am working on the todo list app and used CheckBox
to check off the todo on the list.
But it keeps going back to the unchecked state on refreshing the page.
I want to save the state in the database.
I am populating the todoList in getAllTodos
Here is the code:
List<Todo>_todoList=List<Todo>();
@override
initState(){
super.initState();
getAllTodos();
}
getAllTodos()async{
_todoService=TodoService();
_todoList=List<Todo>();
var todos= await _todoService.readTodo();
todos.forEach((todo){
setState(() {
var model=Todo();
model.id=todo['id'];
model.title=todo['title'];
model.dueDate=todo['dueDate'];
model.category=todo['category'];
model.isFinished=todo['isFinished'];
_todoList.add(model);
});
});
}
body: ListView.builder(itemCount: _todoList.length,itemBuilder: (context, index){
return Padding(
padding: EdgeInsets.only(top:8.0, left: 8.0, right: 8.0),
child: Card (
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0)
),
child: InkWell(
onTap: (){
setState(() {
_todoList[index].isChecked=!_todoList[index].isChecked;
});
},
child: ListTile(
leading: Checkbox(
checkColor: Colors.indigo,
value: _todoList[index].isChecked,
onChanged: (bool value){
setState(() {
_todoList[index].isChecked=value;
_todoService.saveTodo(_todoList[index]);
});
},
),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(_todoList[index].title ?? 'No Title',
style: TextStyle(decoration: (_todoList[index].isChecked? TextDecoration.lineThrough: TextDecoration.none),
),
),
IconButton(icon: Icon(Icons.delete,color: Colors.red,
),
onPressed: (){
_deleteFormDialog(context,_todoList[index].id);
}
),
],
),
subtitle: Text(_todoList[index].dueDate ?? 'No Due Date'),
),
),
),
);
}),
Here is the isChecked value:
class Todo{
bool isChecked=false;
}
Please help me out.
Update: Added a line in the setState()
of onChanged callback calling the service method to change the state of of the checkbox via _todoService.saveTodo(_todoList[index]);
Now the problem is that onChange()
is called twice on a single tap. How do I correct the multi-calls in the onChange callback?
Follow the steps from here w.r.t checkbox manipulation.
Hopefully, everything works!
Answered by CATALUNA84 on November 18, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP