Cannot remove the last item in the ListView Flutter

Question

I have a ListView containing the observable list var cartItems = <CartItem>[].obs;, when I tried to remove the last item in the ListView, I got error RangeError (index): Invalid value: Valid value range is empty: 0 and it was undone. Anyone can show me how to fix it? Thanks in advance. This is my code to hold the ListView:

return Obx(() {
      if (_cartController.isLoading == false) {
        if (_cartController.cartItems.length == 0) {
          return Center(
            child: Text("Your cart is empty."),
          );
        }
        return Scaffold(
          backgroundColor: Colors.white,
          body: ListView.separated(
            ...
            itemBuilder: (context, index) {
              return Slidable(
                endActionPane: ActionPane(
                  motion: ScrollMotion(),
                  children: [
                    SlidableAction(
                      onPressed: (context) {
                        setState(() {
                          _cartController.cartItems.removeAt(index);
                        });
                        _cartController
                            .removeFromCart(
                                userId: widget.user.id,
                                productId:
                                    _cartController.cartItems[index].item.id)
                            .then((value) {...});
                      },
                      ...
                    ),
                  ],
                ),
                child: GestureDetector(
                  onTap: () => Get.to(() => ProductDetailsScreen(
                      product: _cartController.cartItems[index].item)),
                  child: _itemCard(
                      cartItem: _cartController.cartItems[index], index: index),
                ),
              );
            },
            ...
          ),
          ...
        );
      } else {
        ...
      }
    });

@Diwyansh, if the list only has 1 item, I cannot remove this item, if there is more than 1 item I cannot remove the last one. Hope you can help me. — MinhHy, Dec 23 '21 at 18:39

score 1 · Accepted Answer · answered Dec 23 '21 at 19:06

The issue is with your onPressed function. what does the removeFromCart method do? I presume it's calling some api. The problem here is that you are removing the item from cartItems array using removeAt(index) method. Then you are calling removeFromCart method on your controller. And, arguments for that removeFromCart method includes productId: _cartController.cartItems[index].item.id.

The error is coming from that line, when item count is 1, here is what your code does:

It removes the item at index = 0 on _cartController.cartItems.removeAt(index); line.
Then proceeds to call to _cartController.removeFromCart() which has argument called productId. But, now your cartItems array is empty - you already removed the item in the previous step. So, it will throw an exception.

Solution: only remove the cartItem at specific index after completing your api call or when that removeFromCart() promise full fills.

thank you so much. at before i wanted to remove quickly because the api was a little slow. thank you so much. — MinhHy, Dec 24 '21 at 04:46

Cannot remove the last item in the ListView Flutter

1 Answers1