A dismissed Dismissible widget is still part of the tree. In flutter

Question

I have an application which uses firebase as my database and I have this problem on the screen

I'm adding Dismissible widget to delete the items. It works properly on the database when I look but not on the app itself.

Here is my dismissible:

return Dismissible(
                    key: Key(todos[index].title),
                    background: Container(padding:EdgeInsets.only(left: 20),alignment: Alignment.centerLeft,
                        child:Icon(Icons.delete),
                      color:Colors.red,
                    ),
                    onDismissed: (direction) async{
                      await DatabaseService().removeTodo(todos[index].uid);

                    },
                    child: ListTile(
                      onTap: (){
                        DatabaseService().completTask(todos[index].uid);

                      },
                      leading: Container(
                        padding: EdgeInsets.all(2),
                        height: 30,
                        width: 30,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          shape: BoxShape.circle
                        ),
                        child: todos[index].isComplet? Icon(Icons.check,color: Colors.white):Container(

                        ),
                      ),
                      title: Text(
                        todos[index].title,
                      )
                    ),

and here is my database services:

class DatabaseService{
  CollectionReference todosCollection = FirebaseFirestore.instance.collection("Todos");
  Future createNewTodo(String title) async{
    return await todosCollection.add({
      "title":title,
      "isComplet":false,
    });
  }
  Future completTask(uid)async{
    await todosCollection.doc(uid).update({"isComplet":true});
  }

  Future removeTodo(uid) async{
    await todosCollection.doc(uid).delete();
  }

  List<Todo> todoFromFirestore(QuerySnapshot snapshot){
    return snapshot.docs.map((e) {
      return Todo(uid: e.id,
        title: (e["title"]),
        isComplet: e["isComplet"],);
    }).toList();
  }
  Stream<List<Todo>> listTodos() {
    return todosCollection.snapshots().map(todoFromFirestore);
  }
}

If someone can help me I will be really grateful I don't know why this error occurs.

Answer 1

Okay so after some research I fix my problem by myself, the problem is definitely the index so I change:

key: Key(todos[index].title),

for:

key: UniqueKey(),

And It's work correctly, the problem come from the removed item on the list, the widget cannot recognize it.