🚀 Flutter Flavors – The Secret to Production-Grade Apps

When building apps for production, you cannot rely on a single environment.
You need to separate development, staging, and production – each with its own Firebase configs, API URLs, and app IDs.

That’s where Flavors in Flutter come in.

🔹 Why Flavors are Important?

✅ Keep API endpoints separate (dev vs staging vs prod).
✅ Manage Firebase projects for each environment.
✅ Test safely before shipping to real users.
✅ Automate configs → fewer manual mistakes.
✅ Professional workflow for production-ready apps.

🔹 Step 1: Add Package

Install flutter_flavorizr (saves tons of manual work):

dev_dependencies:
  flutter_flavorizr: ^2.1.4

Run:

flutter pub get

🔹 Step 2: Setup Firebase Configs

Organize Firebase files per environment:

assets/firebase/
  ├── development/
  │    ├── google-services.json
  │    └── GoogleService-Info.plist
  ├── staging/
  │    ├── google-services.json
  │    └── GoogleService-Info.plist
  └── production/
       ├── google-services.json
       └── GoogleService-Info.plist

🔹 Step 3: Add Config JSONs

Inside assets/config/ create environment configs:

👉 config.development.json
👉 config.staging.json
👉 config.production.json

Example:

{
  "FLAVOR": "development",
  "GOOGLE_AUTH_CLIENT_ID": "1:889331959331:android:cd1780b696d94127fd1396.apps.googleusercontent.com",
  "BASE_URL": "https://api-dev.roccovideo.com"
}

🔹 Step 4: Configure flavorizr.yaml

Here’s a full example 👇

app:
  android:
    flavorDimensions: "flavor-type"

flavors:
  development:
    app:
      name: "RB Dev"
    android:
      applicationId: "dev.rblive.com"
      icon: "assets/launcher/launcher_icon.png"
      firebase:
        config: "assets/firebase/development/google-services.json"
    ios:
      bundleId: "dev.rblive.com"
      icon: "assets/launcher/launcher_icon.png"
      firebase:
        config: "assets/firebase/development/GoogleService-Info.plist"

  staging:
    app:
      name: "RB Staging"
    android:
      applicationId: "staging.rblive.com"
      icon: "assets/launcher/launcher_icon.png"
      firebase:
        config: "assets/firebase/staging/google-services.json"
    ios:
      bundleId: "staging.rblive.com"
      icon: "assets/launcher/launcher_icon.png"
      firebase:
        config: "assets/firebase/staging/GoogleService-Info.plist"

  production:
    app:
      name: "RB Live"
    android:
      applicationId: "pro.rblive.com"
      icon: "assets/launcher/launcher_icon.png"
      firebase:
        config: "assets/firebase/production/google-services.json"
    ios:
      bundleId: "prod.rblive.com"
      icon: "assets/launcher/launcher_icon.png"
      firebase:
        config: "assets/firebase/production/GoogleService-Info.plist"

ide: vscode

instructions:
  - assets:download
  - assets:extract
  - android:icons
  - android:androidManifest
  - android:buildGradle
  - ios:xcconfig
  - ios:buildTargets
  - ios:schema
  - ios:icons
  - ios:plist
  - assets:clean

🔹 Step 5: Generate Flavors

👉 For Firebase setup:

dart run flutter_flavorizr -p google:firebase

👉 For flavor configs:

dart run flutter_flavorizr -p android:buildGradle,android:flavorizrGradle,android:androidManifest

🔹 Step 6: Run the App with Flavors

flutter run --flavor development -t lib/main_development.dart
flutter run --flavor staging -t lib/main_staging.dart
flutter run --flavor production -t lib/main_production.dart

🏆 Final Thoughts

With Flutter Flavors, you:

• Keep environments clean 🔑
• Avoid config mixups 🚫
• Deliver production-grade apps like a pro ✅

👉 If you’re serious about publishing apps at scale, Flavors are not optional – they’re essential.

#Flutter #MobileDevelopment #Firebase #AppDevelopment #FlutterFlavors #ProductionReady