Search⌘ K
AI Features
Home
Courses
Managing State in Flutter Using BLoC Pattern

Solution: Implementing the Shopping Cart

Explore how to implement the ShoppingCartCubit using the repository pattern with Cubits in Flutter. Learn to add, remove, and clear items in the cart, update the UI with BlocProvider, and display the total amount for checkout. Understand state management without modifying previous states directly for efficient Flutter e-commerce development.

We'll cover the following...

We hope you did well in the exercise! It’s time to compare your solution to ours.

Implementing ShoppingCartCubit

To implement the ShoppingCartCubit, we can use the functions provided to us by the ShoppingCart model.

Dart
// inside lib\cubits\shopping_cart\shopping_cart_cubit.dart
void addItemToCart(ShoppingCartItem item) {
  ShoppingCart updatedCart = state.shoppingCart.copyWith();
  updatedCart.addItem(item);
  emit(ShoppingCartUpdated(updatedCart));
}
void removeItemFromCart(ShoppingCartItem item) {
  ShoppingCart updatedCart = state.shoppingCart.copyWith();
  updatedCart.removeItem(item);
  emit(ShoppingCartUpdated(updatedCart));
}
void clearCart() {
  ShoppingCart updatedCart = state.shoppingCart.copyWith();
  updatedCart.clear();
  emit(ShoppingCartUpdated(updatedCart));
}

In all of these functions, we use the respective functions provided to us in the ShoppingCart model. Therefore, for addItemToCart(), we use the addItem() function (line 4); for removeItemFromCart(), we use the removeItem() function (line 10); and for clearCart(), we use the clear() function (line 16).

When updating the state of the ShoppingCartCubit, it’s important to avoid modifying the previous state directly because this can ...