Build a Women's Clothing Shop App with Flutter · Part 3

Build the Shopping Cart

Published 2026-06-12

What you'll build

In this part you'll build the shopping cart — a Riverpod state notifier that tracks cart items across the app, quantity controls, and a cart screen with a live subtotal and a checkout button.

By the end of this part:

The Add to Cart button on the product detail page works
The cart icon in the nav shows a live item count badge
The cart screen lists items with quantity controls and a remove button
A subtotal updates as quantities change
A Checkout button is ready for the payment flow in Part 5

The cart model

The cart holds a list of CartItem objects — a product plus the selected size and quantity:

BlocWeave prompt

Create the cart data layer. 1. lib/models/cart_item.dart — a CartItem class with fields: product (Product), selectedSize (String), quantity (int). Add computed getters: subtotal (price × quantity), and a copyWith method. 2. lib/features/cart/cart_notifier.dart — a Riverpod Notifier<List> that manages the cart state with methods: - addItem(Product product, String size) — if the product+size combination already exists, increment quantity; otherwise add a new CartItem - removeItem(String productId, String size) - updateQuantity(String productId, String size, int quantity) — remove the item if quantity reaches 0 - clearCart() - Computed getter: totalPrice — sum of all item subtotals - Computed getter: totalItems — sum of all quantities 3. lib/features/cart/cart_provider.dart — export the cartNotifierProvider and a derived cartTotalProvider

Wire up Add to Cart

Update the product detail screen to use the cart notifier:

BlocWeave prompt

Update lib/features/catalog/product_detail_screen.dart. When the "Add to Cart" button is tapped, call cartNotifierProvider.notifier.addItem() with the product and selected size. After adding, show a SnackBar that says "Added to cart" with an "View cart" action that navigates to /cart. Import the cart provider from the cart feature.

Build the cart screen

BlocWeave prompt

Build the cart screen at lib/features/cart/cart_screen.dart. The screen watches cartNotifierProvider and shows: - An empty state illustration and "Your cart is empty" message with a "Browse products" button when the cart is empty - A ListView of cart items when not empty. Each item row shows: product image (60×60, rounded), product name, selected size, a quantity stepper (minus button, count, plus button), price for that line, and a delete icon - A bottom summary section pinned to the bottom: item count, subtotal formatted as "GHS X.XX", and a full-width "Checkout" button in rose gold Quantity changes and removals update immediately via the cart notifier.

Add a cart badge to the nav

The bottom navigation bar should show how many items are in the cart:

BlocWeave prompt

Update lib/shared/widgets/app_scaffold.dart (or lib/router.dart wherever the BottomNavigationBar is defined). Add a badge to the Cart tab that shows the total item count from cartNotifierProvider. Use Flutter's built-in Badge widget. Hide the badge when the cart is empty.

Test the cart flow

Walk through the full flow:

Open a product, select a size, tap Add to Cart
The SnackBar appears — tap "View cart" to navigate to the cart
Adjust quantity with the stepper — subtotal updates
Add the same product+size again from the catalog — quantity increments (no duplicate entry)
Add the same product in a different size — appears as a separate line
Tap the delete icon — item is removed
Reduce quantity to zero with the minus button — item is removed
Empty the cart — the empty state appears

Cart state is in-memory. If the user closes the app, the cart resets. For a production app you'd persist the cart to SharedPreferences or Firestore. That's a good follow-up exercise — ask BlocWeave to add persistence using shared_preferences after completing this series.

Project structure after Part 3

lib/
  features/
    cart/
      cart_screen.dart
      cart_notifier.dart
      cart_provider.dart
  models/
    cart_item.dart

What's next

In Part 4 we add Firebase Authentication — email/password and Google sign-in. Guest users can browse and fill their cart, but checkout requires an account. The sign-in flow will be triggered automatically when the Checkout button is tapped without a session.

← Previous Next →