Separating dev and production environment in your Flutter...

Mixing dev and production environment is one of the most common mistakes in Flutter development, and the consequences compound quickly. Test sign-ups and data pollute your production data, errors in testing sessions spike your Crashlytics error counts in production, and a single misplaced sendNotification() call during a debug run can ping thousands of real users.

The fix?

Flavors in Flutter allows you to create distinct versions of your application from a single codebase (e.g., Development, Production, Staging etc). By leveraging Flavors, you keep your test data separated in a Sandbox Firebase project while ensuring your production live database is clean and safe, and you can install both variants on your phone concurrently.

Let's see how we can implement it in Flutter:

1. Set up 2 Firebase projects, one for development, one for production.

In this case, the project for dev will have the details:
Name: My App (Test)
Package name: com.example.app.dev

For production:
Name: My App
Package name: com.example.app

After setting up each of the projects, you can download the config files and place them as following in your directories:

2. Configuration required for Android and iOS

For Android, configure the flavors in app/build.gradle as following for dev and production flavors:

android {
    flavorDimensions "env"
    productFlavors {
        dev {
            dimension "env"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
            resValue "string", "app_name", "MyApp (Dev)"
        }
        production {
            dimension "env"
            // no suffix — this is the canonical app ID
            resValue "string", "app_name", "MyApp"
        }
    }
}

Android automatically picks up the correct google-services.json from src/dev/ or src/production/ at build time, so no extra configuration is required.

For iOS, the flavor is picked up using "Schemes".
In order to configure them, Open Xcode, go to Product → Scheme → Manage Schemes, open the existing Runner scheme, and create a duplicate scheme and rename the copies to dev and production. You will not need the Runner scheme anymore.

The manage scheme should look like
.
For further configuration, go to Xcode -> Runner -> Build phases. Click on the add icon to create a new Run script.

The new run script will help determine which Firebase configuration to use. Add this code to the script:

FLAVOR="${FLUTTER_FLAVOR}"

if [ "${FLAVOR}" == "production" ]; then
cp "${PROJECT_DIR}/flavors/production/GoogleService-Info.plist" \
"${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app/GoogleService-Info.plist"
else
cp "${PROJECT_DIR}/flavors/dev/GoogleService-Info.plist" \
"${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app/GoogleService-Info.plist"
fi

Make sure this Run Script phase runs before the "Copy Bundle Resources" phase in Xcode. Drag it above if needed.

Now we are done with the configuration required in for iOS and Android folders.

3. Add flavors in your Flutter code

The next step would be configuring the Flutter app to follow flavors.
We will create 2 main.dart files which will serve as an entry point for the respective flavors. The directory should look like:

The app_config file will contain the details needed for each flavor.

app_config.dart

enum Flavor { dev, production }

class AppConfig {
  static late Flavor flavor;

  static bool get isDev => flavor == Flavor.dev;
  static bool get isProd => flavor == Flavor.production;

  static String get appName {
    switch (flavor) {
      case Flavor.dev: return 'MyApp (Dev)';
      case Flavor.production: return 'MyApp';
    }
  }
  static String get baseUrl {
    switch (flavor) {
      case Flavor.dev: return 'https://test.api.com';
      case Flavor.production: return 'https://api.com';
    }
  }
}

main_dev.dart

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options_dev.dart';
import 'config/app_config.dart';
import 'main.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  AppConfig.flavor = Flavor.dev;

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options_production.dart';
import 'config/app_config.dart';
import 'main.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  AppConfig.flavor = Flavor.production;

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

Use the FlutterFire CLI to generate separate firebase_options.dart files for each Firebase project. Run these commands from your Flutter project root.

dart pub global activate flutterfire_cli

# Generate options for the dev Firebase project
flutterfire configure \
  --project=my-app-dev \
  --out=lib/firebase_options_dev.dart \
  --platforms=android,ios

# Generate options for the production Firebase project
flutterfire configure \
  --project=my-app\
  --out=lib/firebase_options.dart \
  --platforms=android,ios

Each generated file exports a DefaultFirebaseOptions class. Since they live in different files, each main_*.dart imports only its own.

4. Run the app and configure flavors in VSCode

To run the app, we can now use the Flavors and entry point as follows:

flutter run \
  --flavor dev \
  -t lib/main_dev.dart

# Run the production flavor
flutter run \
  --flavor production \
  -t lib/main.dart

We can also configure VSCode run button to use the flavors by editing the launch.json inside .vscode folder as:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "production-debug",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "--flavor",
        "production",
        "--target",
        "lib/main.dart"
      ]
    },
    {
      "name": "dev-debug",
      "request": "launch",
      "type": "dart",
      "program": "lib/main_dev.dart",
      "args": [
        "--flavor",
        "dev",
        "--target",
        "lib/main_dev.dart"
      ]
    },
    {
      "name": "production-release",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "--flavor",
        "production",
        "--target",
        "lib/main.dart",
        "--release"
      ]
    },
    {
      "name": "dev-release",
      "request": "launch",
      "type": "dart",
      "program": "lib/main_dev.dart",
      "args": [
        "--flavor",
        "dev",
        "--target",
        "lib/main_dev.dart",
        "--release"
      ]
    }
  ],
  "compounds": []
}

This will give you 4 run options, which can help you build the debug and release versions for both dev and production.

Now you are done with all the necessary setup required.

5. Use flavors inside your app logic

Inside your application, you can write the code based on Flavors such as:

class ApiService {
  static String baseUrl = AppConfig.baseUrl;
}

// Show a banner only in dev builds
if (AppConfig.isDev) {
}

推荐订阅源

DEV Community