How to resolve issue: “A dismissed Dismissible widget is still part of the tree” while use Bloc

Question

while implementing Dismissible widget I have error while removing an item.

    return Dismissible(
      key: Key(widget.product.id),
      onDismissed: (direction) {
        setState(() {
          BlocProvider.of<ManagerBloc>(context)
              .add(RemoveProduct(widget.product));
        });

Parent of this child looks like

          return ListView.builder(
              itemCount: state.shopItem.length,
              itemBuilder: (BuildContext context, int index) {
                return ProductElement(product: state.shopItem[index]);
              });
        }

I moved it to parent and remove shopItem.removeAt() with blocProvider but still I got this isseu. Even if I remove the object using remove on the list, it's showing this same error message:

    if (event is RemoveProduct) {
      await shopListRepository.remove(event.product);
      yield DefaultDataManager((state as DefaultDataManager)
          .shopItem
          .where((item) => item.id != event.product.id)
          .toList());
    }

I tried UniqueKey and it was this same result. My product_id is '64b7ff60-f782-11e9-a3e8-a9ee0aa87ea5' generated by uuid.v1().

Answer 1

I think the issue is that you are not removing the data model whose list generates the UI just after (synchronously) onDismissed was called. Let us say you have a List<Item> _items in your widget's State that stores the UI data model that populates the list. What you have to do in order for Dismissible to work is to call _items.remove(item) in your State synchronously when onDismissed is called.

So, do not await in between and do not simply remove the item from the repository, remove it from the actual State too (I am specifically telling you this because I can see you are doing await shopListRepository.remove(event.product) ).