OnChanged State of Checkbox in Flutter

Question

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?

Solution

Follow the steps from here w.r.t checkbox manipulation.

Hopefully, everything works!

Comments

[Cristian Bregant]

Where do you populate the _todoList? please add the code

[Ruchita Bhaskar]

added the code @CristianBregant

[Miguel Ruivo]

@RuchitaBhaskar but where is it actually? Inside your build() method?

[Ruchita Bhaskar]

No, outside the build() method @MiguelRuivo

[Miguel Ruivo]

Where do you call getAllTodos()?

[Ruchita Bhaskar]

In initState() method @MiguelRuivo

[Miguel Ruivo]

@RuchitaBhaskar I need more code context. where is that _todoList property?

[Ruchita Bhaskar]

Upated the code with _todoList property @MiguelRuivo

[CATALUNA84]

Try with a listener, instead of the onChange() block