Set Up Your Flutter Shop App

What you'll build

This series walks you through building a complete mobile shop app for a small women's clothing boutique — product browsing, a shopping cart, Firebase Auth, Paystack checkout, order history, and a shop owner admin screen.

By the end of Part 1 you'll have a Flutter project with a working navigation shell, a consistent theme that matches a boutique aesthetic, and the folder structure all future parts will follow.

Prerequisites

• Flutter SDK installed (3.19 or later)
• VS Code with the Flutter and Dart extensions installed
• BlocWeave installed — search BlocWeave in the Extensions tab
• An Android emulator or iOS simulator running, or a physical device connected

Check your Flutter setup is working:

flutter doctor

All checkmarks should be green before continuing.

Create the project

flutter create --org com.yourname shop_app
cd shop_app
code .

Open the BlocWeave panel in VS Code (Ctrl+L) and create a BLOCWEAVE_PLAN.md in the project root:

# Shop App — Project Plan

## What this is
A Flutter mobile shop app for a women's clothing boutique.
Customer-facing screens: product catalog, product detail, shopping cart, checkout, order history.
Owner screen: add, edit, and delete products.

## Stack
- Flutter 3.19+ / Dart 3
- Firebase (Firestore, Auth, Storage)
- Riverpod for state management
- go_router for navigation
- Paystack for payments (flutter_paystack package)

## Conventions
- All widgets in lib/features/<feature_name>/
- Shared widgets in lib/shared/widgets/
- Models in lib/models/
- Services in lib/services/
- No BuildContext across async gaps — use ref.read inside callbacks
- Use const constructors wherever possible

Add the core dependencies

Open pubspec.yaml and replace the dependencies section:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^3.3.0
  cloud_firestore: ^5.2.0
  firebase_auth: ^5.1.0
  firebase_storage: ^12.1.0
  flutter_riverpod: ^2.5.1
  riverpod_annotation: ^2.3.5
  go_router: ^14.2.0
  cached_network_image: ^3.3.1
  flutter_paystack: ^2.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^2.4.11
  riverpod_generator: ^2.4.0

Then run:

flutter pub get

Build the navigation shell and theme

Add google_fonts: ^6.2.1 to pubspec.yaml if needed.

Review the structure

After BlocWeave writes the files, your lib/ folder should look like:

lib/
  features/
    catalog/
    cart/
    orders/
    admin/
  models/
  services/
  shared/
    widgets/
      app_scaffold.dart
  router.dart
  theme.dart
  main.dart

If BlocWeave put files in the wrong place, tell it the correct paths. It tracks the file tree and will move imports correctly.

Run the app

flutter run

You should see the themed bottom navigation shell with three tabs — Home, Cart, and Orders — each showing an empty placeholder screen. The rose gold and warm off-white palette should be visible in the app bar.

What's next

In Part 2 we connect Firebase, create the Firestore product schema, and build the product catalog screen — a scrollable grid of product cards with images, names, and prices.