被关闭的 Dismissible 小部件仍然是树的一部分

Question

There seem to be many questions regarding this error but I'm yet to find an answer that will work in my situation.

The behaviour I'm seeing is that the Dismissible works, it fires and deletes the item, but for a moment it shows an error in the ListView. I'm guessing it's waiting for the tree to update based on the Stream<List>, which in turn is removing the record from Firebase.

My StreamBuilder...

return StreamBuilder<List<Person>>(
      stream: personBloc.personsByUserId(userId),
      builder: (context, snapshot) {

...

}

My ListView.builder()

ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        var person = snapshot.data[index];

                        return GestureDetector(
                          onTap: () {
                            Navigator.of(context)
                                .pushNamed('/reading/${person.personId}');
                          },
                          child: Dismissible(
                            key: Key(person.personId),
                            direction: DismissDirection.endToStart,
                            onDismissed: (direction) {
                              personBloc.deletePerson(person.personId);
                            },
                            background: Container(
                              child: Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Icon(
                                      FontAwesomeIcons.trash,
                                      color: Colors.white,
                                    ),
                                    Text(
                                      'Delete',
                                      style: TextStyle(color: Colors.white),
                                      textAlign: TextAlign.right,
                                    ),
                                  ],
                                ),
                              ),
                              color: Colors.red,
                            ),
                            child: AppCard(
                              //Bunch of properties get set here
                            ),
                          ),
                        );
                      },
                    

My deletePerson

  deletePerson(String personId) async {
    fetchPersonId(personId).then((value) {
      if (value.imageUrl.isNotEmpty) {
        removeImage();
      }

      db.deletePerson(personId);
    });
  }

I've tried changing the onDismissed to a confirmDismiss with no luck.

Any suggestions?

Answer 1

This happens when you dismiss with a Dismissible widget but haven't removed the item from the list being used by the ListView.builder . If your list was being stored locally, with latency not being an issue, you might never see this issue, but because you are using Firestore (I assume, based on your mention of Firebase ) then there is going to be some latency between asking the item to be removed from the DB and the list getting updated on the app. To avoid this issue, you can manage the local list separately from the list coming from the Stream . Updating the state as the stream changes, but allowing you to delete items locally from the local list and avoiding these kind of view errors.

Answer 2

I ended up making a couple of changes to my code to address this.

I added a BehaviourSubject in my bloc to monitor whether the delete was taking place or not. At the beginning of the firestore delete I set this to true and then added a .then to the delete to set it back to false.

I then added a Streambuilder around the ListView on the screen to monitor the value of this and show a CircularProgressIndicator when true.

It now looks like this:

Thanks for your help.