BlocWeave
What you'll build
In this part you'll build the Orders tab — a live list of the signed-in user's past orders from Firestore, each showing the status, date, total, and an expandable list of items.
By the end of this part:
- The Orders tab shows a list of the user's orders, newest first
- Each order row shows status, date, total, and item count
- Tapping an order expands it to show the full item list
- Order status updates in real-time from Firestore (useful when the shop owner marks orders as shipped)
Build the orders provider
Create lib/features/orders/orders_provider.dart.
Create a Riverpod StreamProvider<List
Build the orders screen
Build the orders screen at lib/features/orders/orders_screen.dart. The screen watches userOrdersProvider and shows: - A signed-out state with "Sign in to see your orders" and a sign-in button, if the user is null - An empty state with "No orders yet" and a "Start shopping" button if the list is empty - A ListView of order cards when orders exist Each order card shows: - Order date formatted as "12 Jun 2026" - A status chip (Pending = amber, Paid = blue, Shipped = indigo, Delivered = green) - Total amount: "GHS 360.00" - Number of items: "2 items" - A chevron to expand/collapse When expanded, the card shows a list of the items in that order: product name, size, quantity × unit price. Use ExpansionTile or AnimatedContainer for the expand/collapse. Keep the animation smooth.
Add a status badge widget
The status chip is reused across the orders screen and will be useful in the admin screen (Part 7). Extract it as a shared widget:
Create lib/shared/widgets/order_status_badge.dart — a small chip widget that takes an OrderStatus string and renders: - "Pending" with amber background - "Paid" with blue background - "Shipped" with indigo background - "Delivered" with green background Use white text on all variants. Make it compact — small font, tight padding.
Real-time status updates
Because userOrdersProvider uses a Firestore stream, order status updates in real-time. Test this by going to the Firestore console while the Orders screen is open, and changing an order's status field from paid to shipped. The badge in the app should update within a second.
Handle the signed-out case gracefully
If a user signs out while on the Orders tab, the screen should react:
Update lib/features/orders/orders_screen.dart so that when currentUserProvider changes to null (user signs out), the screen immediately shows the signed-out state rather than the previous user's orders. The userOrdersProvider should return an empty stream for null users, so this should happen automatically — verify the behaviour by signing out from the AppBar menu while on the Orders tab.
Test the orders screen
- Sign in and place an order (from Part 5)
- Navigate to the Orders tab — the order should appear with "Paid" status
- Tap the order row — it expands to show the items
- In the Firestore console, change
statustoshipped— the badge updates in the app without a refresh - Sign out — the signed-out state appears immediately
- Sign in again — the orders reappear
Project structure after Part 6
lib/
features/
orders/
orders_screen.dart
orders_provider.dart
shared/
widgets/
order_status_badge.dartWhat's next
In Part 7 — the final part — we build the admin screen for the shop owner. The owner can add new products with photos, edit prices and stock status, and update order statuses, all from within the app.