Flutter E-Commerce UI Kit documentation

A premium, production-ready e-commerce mobile app template built with Flutter. Light & dark mode, deep checkout flow with promos & shipping options, a write-a-review composer, reusable component library, Provider state management, and Material Design 3.

• 25+ beautiful screens
• 10 state providers
• 14+ data models
• Light & dark theme modes

Key features

Everything you need to build a professional e-commerce mobile application.

What’s included

A comprehensive set of screens covering all e-commerce needs.

Built with modern and reliable technologies.

• Flutter 3.x
• Dart 3.x
• Provider
• Material 3
• Dark mode
• Google Maps
• Plus Jakarta Sans
• SVG support

Make sure you have the following tools installed:

Follow these steps to get started.

1. 01

   Extract the project

   Extract the downloaded zip file to your desired location.

   terminalCopy

   cd path/to/e_commerce_ui_template

2. 02

   Install dependencies

   Run the following command to install all required packages:

   terminalCopy

   flutter pub get

   This will install the following dependencies:

   • provider — State management
   • flutter_svg — SVG rendering
   • google_fonts — Custom fonts
   • google_maps_flutter — Maps integration
   • share_plus — Native sharing
   • intl — Internationalization
   • http — HTTP requests
   • uuid — Unique ID generation
3. 03

   Configure Google Maps (optional)

   To enable the order tracking map feature and Places autocomplete, add your Google Maps API key — see Google Maps (optional).
4. 04

   Run the app

   Connect a device or start an emulator, then run:

   terminalCopy

   flutter run

   Or use your IDE’s run button to launch the app.

   Success! The app should now be running on your device or emulator.

To enable the order tracking map feature and Places autocomplete, you need to add your Google Maps API key in multiple locations.

1. 01

   Update environment config

   Edit lib/core/config/env.dart and replace the API key:

   lib/core/config/env.dartCopy

   class Env {
     Env._();
   
     /// Google Maps API Key
     /// Used for Google Maps SDK and Places API
     static const String googleMapsApiKey = 'YOUR_API_KEY_HERE';
   }

   Warning

   Security: For production apps, consider using environment variables or a secure secrets manager instead of hardcoding API keys. Add this file to .gitignore to prevent committing sensitive data.
2. 02

   Configure Android

   Edit android/app/src/main/AndroidManifest.xml and add your API key:

   android/app/src/main/AndroidManifest.xmlCopy

   <manifest ...>
       <application ...>
           <meta-data
               android:name="com.google.android.geo.API_KEY"
               android:value="YOUR_API_KEY_HERE"/>
       </application>
   </manifest>

3. 03

   Configure iOS

   Edit ios/Runner/AppDelegate.swift and add your API key:

   ios/Runner/AppDelegate.swiftCopy

   import GoogleMaps
   
   @main
   @objc class AppDelegate: FlutterAppDelegate {
     override func application(
       _ application: UIApplication,
       didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
     ) -> Bool {
       GMSServices.provideAPIKey("YOUR_API_KEY_HERE")
       GeneratedPluginRegistrant.register(with: self)
       return super.application(application, didFinishLaunchingWithOptions: launchOptions)
     }
   }

Understanding the codebase organization.

lib/
├── config/
│   └── routes/                      # Route configuration
│       └── app_routes.dart          # Route definitions
├── core/
│   ├── config/
│   │   └── env.dart                 # API keys & environment
│   └── utils/                       # Utilities
│       ├── currency_formatter.dart  # Price formatting
│       └── json_loader.dart         # JSON file loader
├── data/
│   ├── datasources/local/           # Local data sources
│   ├── models/                      # Data models
│   ├── providers/                   # State providers
│   └── repositories/                # Repository layer
├── screens/                         # Feature screens
│   ├── account/
│   ├── address/
│   ├── auth/
│   ├── carts/
│   ├── checkout/
│   ├── discover/
│   ├── favorites/
│   ├── notification/
│   ├── orders/
│   ├── payment_methods/
│   ├── product_details/
│   ├── product_reviews/
│   ├── search/
│   └── main_screen.dart             # Bottom nav container
├── theme/                           # App theming
│   └── app_theme.dart               # Material 3 theme
├── widgets/                         # Reusable widgets
└── main.dart                        # App entry point

assets/
├── icons/                           # SVG icons
├── images/                          # Product images
└── mock_data/                       # JSON mock data
    ├── products.json
    ├── categories.json
    ├── carts.json
    ├── favorites.json
    ├── addresses.json
    ├── payment_methods.json
    ├── orders.json
    ├── notifications.json
    ├── reviews.json
    └── banner.json

Built with scalable and maintainable architecture patterns.

JSON Files → LocalDataSource → Repository → Provider → Screen UI

Model layer

Data classes with fromJson() factory constructors for JSON deserialization.

class ProductModel {
  final String id;
  final String name;

  factory ProductModel.fromJson(
    Map<String, dynamic> json) {
    return ProductModel(
      id: json['id'],
      name: json['name'],
    );
  }
}

DataSource layer

Loads JSON data and maps to models. Replace with API calls for production.

class ProductLocalDataSource {
  Future<List<ProductModel>>
    getProducts() async {
    final jsonList = await JsonLoader
      .loadJsonList('products.json');
    return jsonList
      .map(ProductModel.fromJson)
      .toList();
  }
}

Repository layer

Abstraction layer with dependency injection for easy testing and swapping implementations.

class ProductRepository {
  final ProductLocalDataSource
    _localDataSource;

  ProductRepository({
    ProductLocalDataSource?
      localDataSource})
    : _localDataSource =
      localDataSource ??
      ProductLocalDataSource();
}

Provider layer

State management using ChangeNotifier. Exposes data and loading states to UI.

class ProductProvider
  extends ChangeNotifier {
  List<ProductModel> _products = [];
  bool _isLoading = false;

  Future<void> loadProducts() async {
    _isLoading = true;
    notifyListeners();
    _products = await _repository
      .getProducts();
    _isLoading = false;
    notifyListeners();
  }
}

Detailed breakdown of every screen and functionality.

Discover / home screen

The main landing screen featuring product discovery and browsing capabilities.

Product details screen

Comprehensive product view with all purchase-related actions.

Product reviews screen

Customer reviews and ratings with filtering capabilities.

Search screen

Product search with history and real-time results.

Favorites screen

Wishlist management for saved products.

Cart screen

Shopping cart with item management and checkout preparation.

Checkout screen

Complete checkout flow with shipping and payment.

Order success screen

Confirmation page after successful order placement.

My orders screen

Order history with ongoing and completed orders.

Track order screen

Real-time order tracking with Google Maps integration.

Account screen

User profile and settings hub.

Edit profile screen

User profile editing with photo management.

Address management

Complete address CRUD operations with map integration.

Payment methods

Manage credit cards and PayPal accounts.

Notifications screen

Notification center with categorized alerts.

Login and password recovery flows.

9 providers managing all app state with the Provider pattern.

10 data models with JSON serialization support.

How to customize the template for your needs.

Change theme colors

Edit lib/theme/app_theme.dart to customize the color scheme. The app uses Material 3 color system.

colorScheme: ColorScheme.fromSeed(
  seedColor: Colors.purple, // Change this
),

Update mock data

Modify JSON files in assets/mock_data/ to change products, categories, and other content.

{
  "id": "1",
  "name": "Your Product",
  "price": 99.99
}

Connect backend API

Replace LocalDataSource classes with API calls. The repository pattern makes this easy:

class ProductRepository {
  // Replace LocalDataSource
  // with ApiDataSource
}

Replace images

Add your product images to assets/images/ and update references in the JSON mock data files.

Configure maps

Add your Google Maps API key as shown in Google Maps (optional). Customize map markers in the track order screen.

Change fonts

The app uses Google Fonts (Montserrat). Change the font in lib/theme/app_theme.dart:

textTheme: GoogleFonts
  .montserratTextTheme(),

Common issues and solutions.

Flutter SDK version error

If you get SDK version errors, make sure you have Flutter 3.10.4 or higher:

flutter --version

Upgrade Flutter if needed:

flutter upgrade

Dependency resolution issues

Try cleaning and getting dependencies again:

flutter clean
flutter pub get

Google Maps not showing

Make sure you’ve:

• Added your Google Maps API key correctly
• Enabled Maps SDK for Android/iOS in Google Cloud Console
• Added billing to your Google Cloud project

iOS build errors

If you encounter iOS build issues:

cd ios
pod deintegrate
pod install
cd ..
flutter run

Android Gradle issues

Try invalidating caches or updating Gradle:

cd android
./gradlew clean
cd ..
flutter run

Every version published so far. Updates are free for the life of the item.

If you have any questions or issues, feel free to reach out:

You can also contact us through CodeCanyon for any questions about this template.

What support covers

• Six months of support from purchase, extendable at checkout
• Support covers bugs in the template and questions about how it is put together
• It does not cover custom feature work, third-party API changes or store review outcomes
• The Regular licence covers one free end product. Charging users for the app itself needs the Extended licence