How to remove item from cart in flutter/ dart

Question

How to remove cart items from a list in flutter when you have a seperate list widget?

I have three files that contain the following code.

carts.dart => where I display all the list items

cart_list_item => where I have created a widget.

api_services.dart => from where I am accessing the functions.

It was working when the cart list widget and cart list was in a single file. but to increment cart quantity I had to separate them.

CARTS.DART

class _CartsListState extends State<CartsList> {
  
  List cartList = [];
  getProducts() async {
    var resp = await http.get(
        Uri.parse("https://abc"));
    cartList.addAll(jsonDecode(resp.body));
     setState(()=>{});
    return jsonDecode(resp.body);
  }

  @override
  void initState() {
    super.initState();
    getProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: FutureBuilder(
          future: getProducts(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: cartList.length,
                itemBuilder: (BuildContext context, int index) {
                  var path = "https://abc";
                  var img = cartList[index]['image'] ?? 'default.png';
                  return MyCartListItem(
                      cartName: cartList[index]['english_name'],
                      cartQuantity: 2,
                      cartImage: path + img,
                      cartPrice: cartList[index]['mrp'].toString(),
                      cartIndex: 5);
                },
              );
            } else {
              return const LinearProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

cart_list_item.dart

class MyCartListItem extends StatefulWidget {
  const MyCartListItem(
      {Key? key,
      required this.cartName,
      required this.cartQuantity,
      required this.cartImage,
      required this.cartPrice,
      required this.cartIndex})
      : super(key: key);
  final String cartName;
  final int cartQuantity;
  final String cartImage;
  final String cartPrice;
  final int cartIndex;

  @override
  State<MyCartListItem> createState() => _MyCartListItemState();
}

 @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(10.5),
        child: Row(children: [
          const SizedBox(
            width: 10,
          ),
          SizedBox(
            width: 70,
            height: 70,
            child: Image.network(widget.cartImage),
          ),
          const SizedBox(
            width: 50,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                // ignore: prefer_const_literals_to_create_immutables
                children: [
                  Container(
                    child: Text(
                      widget.cartName,
                      style: const TextStyle(
                        overflow: TextOverflow.clip,
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                ],
              ),
              const SizedBox(
                height: 7,
              ),
              Text(
                "Rs. ${widget.cartPrice}",
                style: const TextStyle(
                    fontWeight: FontWeight.bold, color: Colors.grey),
              ),
              const SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  InkWell(
                    onTap: () {
                      // setState() {
                      //   _itemCount--;
                      //   print(_itemCount);
                      // }
                    },
                    child: Container(
                        height: 30,
                        width: 30,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          color: Colors.deepOrange[50],
                        ),
                        child: const Icon(
                          CupertinoIcons.minus,
                        )),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(_itemCount.toString()),
                  const SizedBox(
                    width: 10,
                  ),
                  InkWell(
                    // onTap: () {
                    //   setState() => {_itemCount++};
                    // },
                    child: Container(
                        height: 30,
                        width: 30,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          color: Colors.deepOrange[50],
                        ),
                        child: const Icon(
                          CupertinoIcons.plus,
                        )),
                  ),
                  const SizedBox(
                    width: 15,
                  ),
                  InkWell(
                    onTap: () {
                      ApiServices.removeCartItem(0);
                      // setState(() {});
                      final snackBarData = SnackBar(
                        behavior: SnackBarBehavior.floating,
                        content: Row(
                          children: const [
                            Icon(Icons.shopping_bag),
                            SizedBox(
                              width: 10,
                            ),
                            Text('Product removed from cart !!!'),
                          ],
                        ),
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBarData);
                    },
                    child: const Icon(
                      CupertinoIcons.trash,
                      color: Colors.red,
                    ),
                  )
                ],
              )
            ],
          )
        ]),
      ),
    );
  }
}

api services.dart *

 static removeCartItem(int indexNumber) async {
    cartList.removeAt(indexNumber);
  }

Answer 1

You need to update your view because data in list was changed. If you are using setState for in, implement callback in CartListItem that allows you to handle item deletion and update view in this callback. It should be looks like:

class MyCartListItem extends StatefulWidget {
  const MyCartListItem(
      {Key? key,
      required this.cartName,
      required this.cartQuantity,
      required this.cartImage,
      required this.cartPrice,
      required this.cartIndex,
      required this.onItemRemoved,
  }) : super(key: key);

  final String cartName;
  final int cartQuantity;
  final String cartImage;
  final String cartPrice;
  final int cartIndex;
  final Function onItemRemoved;

  @override
  State<MyCartListItem> createState() => _MyCartListItemState();
}

And in CartListItem :

onTap: () => widget.onItemRemoved(index);

Answer 2

its already answered, but if you still had i problem, i try to make it clear, you can ask later if not working.

in you listViewBuilder:

return ListView.builder(
                itemCount: cartList.length,
                itemBuilder: (BuildContext context, int index) {
                  var path = "https://abc";
                  var img = cartList[index]['image'] ?? 'default.png';
                  return MyCartListItem(
                      cartName: cartList[index]['english_name'],
                      cartQuantity: 2,
                      cartImage: path + img,
                      cartPrice: cartList[index]['mrp'].toString(),
                      cartIndex: 5,
                      //------- this line -------------
                      removeFunction:(){
                       ApiServices.removeCartItem(index);
                      }
                 );
                },
              );

in your Cardlistitem:

class MyCartListItem extends StatefulWidget {
  const MyCartListItem(
      {Key? key,
      required this.cartName,
      required this.cartQuantity,
      required this.cartImage,
      required this.cartPrice,
      required this.cartIndex,
      required this.removeFuntion,
  }) : super(key: key);

  final String cartName;
  final int cartQuantity;
  final String cartImage;
  final String cartPrice;
  final int cartIndex;
  final Function removeFunction;

  @override
  State<MyCartListItem> createState() => _MyCartListItemState();
}
.... Rest OF code
// and here :
InkWell(
                onTap: () {
                  //------- THIS LINE -----:
                  widget.removeFunction;
                  //-----------------------
                  // setState(() {});
                  final snackBarData = SnackBar(
                    behavior: SnackBarBehavior.floating,
                    content: Row(
                      children: const [
                        Icon(Icons.shopping_bag),
                        SizedBox(
                          width: 10,
                        ),
                        Text('Product removed from cart !!!'),
                      ],
                    ),
                  );
                  ScaffoldMessenger.of(context).showSnackBar(snackBarData);
                },
                child: const Icon(
                  CupertinoIcons.trash,
                  color: Colors.red,
                ),
              )