Flutter Midtrans & Raja Ongkir E-Commerce App

A complete Flutter e-commerce application with Midtrans payment & Raja Ongkir integration, built using Clean Architecture, BLoC pattern, Firebase, and Go Router.

Features

Core Features

✅ User Authentication (Email/Password & Google Sign-In)
✅ Product Listing with Categories
✅ Product Detail Page with Image Gallery
✅ Shopping Cart Management
✅ User Profile Management
✅ Address Search with Raja Ongkir API
✅ Shipping Service Selection
✅ Checkout with Auto-fill User Profile
✅ Midtrans Payment Integration
✅ Order History & Status Tracking
✅ Clean Architecture Implementation
✅ State Management with BLoC
✅ Dependency Injection with GetIt
✅ Navigation with GoRouter
✅ Form Validation
✅ Optimized Widget Rebuilding

Additional Features

✅ Google Sign-In
✅ Raja Ongkir Shipping Integration
✅ Order Status Page
✅ Cross-platform (Android & iOS)
✅ BLoC Architecture for All Features

Architecture

This project follows Clean Architecture principles with three main layers:

lib/
├── core/                    # Core utilities and base classes
│   ├── error/              # Error handling
│   ├── network/            # Network utilities
│   └── usecases/           # Base use case
├── features/               # Feature modules
│   ├── auth/              # Authentication
│   ├── products/          # Product listing & detail
│   ├── cart/              # Shopping cart
│   ├── payment/           # Payment & checkout
│   ├── orders/            # Order management
│   └── shipping/          # Shipping services
└── injection_container.dart # Dependency injection

Each feature follows:

Domain Layer: Entities, Repositories (interfaces), Use Cases
Data Layer: Models, Data Sources, Repository Implementations
Presentation Layer: BLoC, Pages, Widgets

BLoC Architecture

AuthBloc: User authentication and profile management
AuthFormBloc: Form validation for login/signup
AddressSearchBloc: Address search with Raja Ongkir
ProductBloc: Product listing and categories
ProductDetailBloc: Individual product details
CartBloc: Shopping cart management
CheckoutBloc: Checkout process and shipping
OrderBloc: Order management and history

Key Features

BLoC State Management

Separate BLoCs for each feature domain
Optimized widget rebuilding with buildWhen
Form validation handled in dedicated BLoCs
Independent loading states for different data

Performance Optimizations

Categories loaded once without rebuilding product widgets
Image caching with cached_network_image
Efficient state management with Equatable
Minimal widget rebuilds using BLoC listeners

Clean Architecture

Domain entities with immutable data
Repository pattern with Either for error handling
Dependency injection with GetIt
Separation of concerns across layers

Prerequisites

Flutter SDK (3.10.7 or higher)
Dart SDK
Firebase Account
Midtrans Account (Sandbox for testing)
Android Studio / VS Code
Git

Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd flutter_midtrans

2. Install Dependencies

flutter pub get

3. Firebase Setup

Android:

Go to Firebase Console
Create a new project or use existing one
Add Android app with package name: com.example.flutter_midtrans
Download google-services.json
Place it in android/app/

iOS:

In Firebase Console, add iOS app
Download GoogleService-Info.plist
Place it in ios/Runner/

Enable Firebase Services:

Enable Authentication (Email/Password & Google)
Enable Cloud Firestore
Create Firestore collections:
- users (for user profiles)
- orders (for order data)

4. Midtrans Setup

Sign up at Midtrans
Get your Server Key from Dashboard → Settings → Access Keys
Create .env file in project root:

CLIENT_KEY=your_midtrans_api_key
SERVER_KEY=your_midtrans_api_key

Note: I'm using Next.js backend, available on my nextjs-midtrans repository.

5. Raja Ongkir Setup

Sign up at Raja Ongkir
Get your API Key from Dashboard
Add API key to .env file

PAYMENT_API_KEY=your_rajaongkir_api_key
SHIPPING_COST_API_KEY=your_rajaongkir_api_key
SHIPPING_DELIVERY_API_KEY=your_rajaongkir_api_key

6. Google Sign-In Setup (Optional)

Android:

Get SHA-1 fingerprint:

cd android
.\gradlew signingReport

Add SHA-1 to Firebase Console → Project Settings → Your Android App

iOS:

Add URL scheme in ios/Runner/Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.YOUR-CLIENT-ID</string>
    </array>
  </dict>
</array>

7. Run the App

flutter run

Configuration Files

Android Configuration

Update android/app/build.gradle.kts:

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services") // Add this
}

Update android/build.gradle.kts:

buildscript {
    dependencies {
        classpath("com.google.gms:google-services:4.4.0") // Add this
    }
}

iOS Configuration

Update ios/Podfile:

platform :ios, '12.0'

Usage

1. Authentication

Launch app → Login/Sign Up screen
Sign up with email/password or use Google Sign-In
User profile is automatically created in Firestore

2. Browse Products

View all products from DummyJSON API
Filter by categories
View product details with image gallery
Add products to cart

3. Shopping Cart

View cart items
Update quantities
Remove items
See total price

4. Checkout

Shipping information auto-filled from user profile
Search and select shipping address via Raja Ongkir
Select shipping service (required)
View shipping cost (displayed but not added to total)
Review order summary
Proceed to payment

5. Payment

Redirected to Midtrans payment page
Choose payment method (Sandbox mode)
Complete payment
Order status updated automatically

6. Order History

View all orders
Check order status
See order details

Testing Payment

Use Midtrans Sandbox test credentials:

Credit Card:

Card Number: 4811 1111 1111 1114
CVV: 123
Exp Date: Any future date
OTP: 112233

Other Methods:

Check Midtrans Sandbox Documentation

API Endpoints

Products API: https://dummyjson.com/products
Midtrans Snap API: https://app.sandbox.midtrans.com/snap/v1/transactions
Raja Ongkir API: https://api-sandbox.collaborator.komerce.id/

Project Structure

lib/
├── core/
│   ├── error/
│   │   └── failures.dart
│   ├── network/
│   │   └── network_info.dart
│   └── usecases/
│       └── usecase.dart
├── features/
│   ├── auth/
│   │   ├── data/
│   │   │   ├── datasources/
│   │   │   ├── models/
│   │   │   └── repositories/
│   │   ├── domain/
│   │   │   ├── entities/
│   │   │   ├── repositories/
│   │   │   └── usecases/
│   │   └── presentation/
│   │       ├── bloc/
│   │       └── pages/
│   ├── products/
│   ├── cart/
│   ├── payment/
│   ├── orders/
│   └── shipping/
├── injection_container.dart
├── router.dart
└── main.dart

Dependencies

dependencies:
  flutter_bloc: ^8.1.3
  equatable: ^2.0.5
  get_it: ^7.6.4
  go_router: ^13.0.0
  firebase_core: ^2.24.2
  firebase_auth: ^4.16.0
  cloud_firestore: ^4.14.0
  google_sign_in: ^6.2.1
  http: ^1.1.2
  dartz: ^0.10.1
  cached_network_image: ^3.3.1
  webview_flutter: ^4.4.4
  flutter_dotenv: ^5.1.0

Troubleshooting

Firebase Issues

Ensure google-services.json (Android) and GoogleService-Info.plist (iOS) are in correct locations
Check Firebase project configuration
Verify package name matches Firebase app

Midtrans Issues

Verify Server Key is correct
Use Sandbox mode for testing
Check network connectivity

Raja Ongkir Issues

Verify API Key is correct in .env file
Ensure .env file is in project root
Check API quota limits

Build Issues

flutter clean
flutter pub get
flutter run

Future Enhancements

Contributing

Fork the repository
Create feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open Pull Request

License

This project is licensed under the MIT License.

Contact

For questions or support, please open an issue in the repository.

Acknowledgments

DummyJSON API for product data
Midtrans for payment gateway
Raja Ongkir for shipping services
Vercel for backend services
Flutter community for amazing packages

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.vscode		.vscode
android		android
ios		ios
lib		lib
linux		linux
macos		macos
test		test
web		web
windows		windows
.env.example		.env.example
.gitignore		.gitignore
.metadata		.metadata
LICENSE		LICENSE
README.md		README.md
analysis_options.yaml		analysis_options.yaml
devtools_options.yaml		devtools_options.yaml
firebase.json		firebase.json
pubspec.lock		pubspec.lock
pubspec.yaml		pubspec.yaml

Folders and files

Latest commit

History

Repository files navigation

Flutter Midtrans & Raja Ongkir E-Commerce App

Features

Core Features

Additional Features

Architecture

BLoC Architecture

Key Features

BLoC State Management

Performance Optimizations

Clean Architecture

Prerequisites

Installation & Setup

1. Clone the Repository

2. Install Dependencies

3. Firebase Setup

Android:

iOS:

Enable Firebase Services:

4. Midtrans Setup

5. Raja Ongkir Setup

6. Google Sign-In Setup (Optional)

Android:

iOS:

7. Run the App

Configuration Files

Android Configuration

iOS Configuration

Usage

1. Authentication

2. Browse Products

3. Shopping Cart

4. Checkout

5. Payment

6. Order History

Testing Payment

API Endpoints

Project Structure

Dependencies

Troubleshooting

Firebase Issues

Midtrans Issues

Raja Ongkir Issues

Build Issues

Future Enhancements

Contributing

License

Contact

Acknowledgments

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Contributors

Uh oh!

Languages