How to create unique instance of provider class for reusable widget in Flutter?

Question

I am creating a Cart screen where items added to cart are listed. I have a list of item tiles that has name, image, price and the number of item. The number of item has two buttons that increases and decreases the number. When I increase/decrease an item from the list. Other item tiles' number also gets updated.

My UI and changenotifier class code below.

UI CODE

   SizedBox(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          IconButton(
                            icon: Icon(
                              Icons.remove_circle_outline,
                              color: context.color.primaryColor,
                            ),
                            onPressed: () {
                              context.read<CartItemProvider>().dcrItem();
                            },
                          ),
                          Text(
                            "${context.watch<CartItemProvider>().noOfItem}",
                            style: context.textTheme.displayLarge,
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.add_circle,
                              color: context.color.primaryColor,
                            ),
                            onPressed: () {
                              context.read<CartItemProvider>().incItem();
                            },
                          ),
                        ],
                      ),
                    )

Provider Class

class CartItemProvider extends ChangeNotifier {
  int noOfItem = 1;
  void incItem() {
    noOfItem++;
    notifyListeners();
  }

  void dcrItem() {
    if (noOfItem == 1) return;
    noOfItem--;
    notifyListeners();
  }
}

Cart Tiles

score 0 · Answer 1 · answered Mar 10 '23 at 21:19

For this, you have two possible ways. The first way is to wrap the widget of each item/CartTile with its own provider and then find a way to retrieve that information when your cart is submitted. On the other hand, the second one is easier. In your cartItemProvider, you can have a list of items List = []; and when you want to update the item count, you can pass the item id and then update it.

I hope it helps! Regards.

// First approach
class _ItemWidgetContent extends StatelessWidget {
  const _ItemWidgetContent();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
            icon: Icon(
              Icons.remove_circle_outline,
              color: context.color.primaryColor,
            ),
            onPressed: () {
              context.read<CartItemProvider>().dcrItem();
            },
          ),
          Text(
            "${context.watch<CartItemProvider>().noOfItem}",
            style: context.textTheme.displayLarge,
          ),
          IconButton(
            icon: Icon(
              Icons.add_circle,
              color: context.color.primaryColor,
            ),
            onPressed: () {
              context.read<CartItemProvider>().incItem();
            },
          ),
        ],
      ),
    );
  }
}

// Second approach
class CartItemsNotifier extends ChangeNotifier {
  List<Item> _items = [];

  CartItemsNotifier();

  List<Item> get items => _items;

  //use this when you load the items on other changeNotifier
  void setItems({required List<Item> newItems}) async {
    _items = newItems;
  }

  Future<void> incItem({required Item item}) async {
    final index = _items.indexWhere((element) => element.id == item.id);
    if (index != -1) {
      final oldItem = _items[index];
      _items[index] = item.copyWith(quantity: oldItem.quantity + 1);
    }
    notifyListeners();
  }

  Future<void> dcrItem({required Item item}) async {
    final index = _items.indexWhere((element) => element.id == item.id);
    if (index != -1) {
      final oldItem = _items[index];
      if (oldItem.quantity == 1) return;
      _items[index] = item.copyWith(quantity: oldItem.quantity - 1);
    }
    notifyListeners();
  }
}

How to create unique instance of provider class for reusable widget in Flutter?

1 Answers1