How to Configure and Use Flutter Flavors

Manage Environments with Flutter Flavors

by Ans Ali

When building a mobile application, managing different environments (such as development, staging, and production) is crucial. Each environment might require different API endpoints, configurations, or even design elements. Flutter, with its flexible and powerful tools, offers a neat solution for this through a feature called "flavors".

What are Flutter Flavors?

Flutter flavors are essentially configurations that allow you to create multiple versions of your app with different settings. Each flavor can have its own API endpoints, app name, app icon, theme, and other configurations. This is especially useful in scenarios where you need to:

  • Develop with different API environments (development, staging, production)
  • Create white-label apps (multiple versions of the same app for different brands)
  • Test different features in isolation (A/B testing)
  • Customise app behaviour based on user roles (admin, user, guest)

Why Use Flutter Flavors?

Flavors streamline the development and deployment process by allowing you to:

Maintain Environment-Specific Configurations

Keep your development, staging, and production configurations separate and easily switch between them.

Simplify Builds

Automatically configure build settings based on the flavor, reducing the need for manual adjustments.

Enhance Testing

Run automated tests on different app versions without altering the core codebase.

Speed Up Development

Quickly switch between different environments or app versions to test features or debug issues.

Setting Up Flutter Flavors

Let’s walk through the process of setting up flavors in a Flutter app. We’ll create three flavors: dev, staging, and production.

Steps Involved

  1. ​​Configure Flavors in android/app/build.gradle
  2. Create Separate Configuration Files
  3. Modify the Entry Point
  4. Running the App with Different Flavors
  5. Configuring iOS Flavors

Step 1: Configure Flavors in android/app/build.gradle
  • Open your android/app/build.gradle file.
  • Define your flavors inside the Android block:
android {
    ...
    flavorDimensions "flavor"
    productFlavors {
        dev {
            dimension "flavor"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
        }
        staging {
            dimension "flavor"
            applicationIdSuffix ".staging"
            versionNameSuffix "-staging"
        }
        prod {
            dimension "flavor"
            applicationIdSuffix ".prod"
            versionNameSuffix "-prod"
        }
    }
}

This configuration creates three flavors: dev, staging, and prod. Each flavor has a unique application ID suffix and version name suffix.

Step 2: Create Separate Configuration Files

You can manage different configurations by creating environment-specific files.

  1. In the lib directory, create a folder called flavors.
  2. Inside flavors, create three files: config_dev.dart, config_staging.dart, and config_prod.dart.

Each file might look like this:

// lib/flavors/config_dev.dart
class Config {
    static const String appName = "AppName Dev";
    static const String apiUrl = 'https://dev.api.example.com';
}

Repeat the process for config_staging.dart and config_prod.dart with their respective configurations.

Step 3: Modify the Entry Point

In the main.dart file, modify the entry point to load the correct flavor:

import 'flavors/config_dev.dart' as devConfig;
import 'flavors/config_staging.dart' as stagingConfig;
import 'flavors/config_prod.dart' as prodConfig;
void main() {
    String flavor = const String.fromEnvironment('FLAVOR');
    switch (flavor) {
        case 'dev':
            runApp(MyApp(config: devConfig.Config()));
            break;
        case 'staging':
            runApp(MyApp(config: stagingConfig.Config()));
            break;
        case 'prod':
            runApp(MyApp(config: prodConfig.Config()));
            break;
        default:
            runApp(MyApp(config: devConfig.Config()));
    }
}

This code checks the current flavor and loads the corresponding configuration.

Step 4: Running the App with Different Flavors

To run your app with a specific flavor, use the following command:

flutter run --flavor dev -t lib/main.dart

Replace dev with staging or prod to run different versions of your app.

Step 5: Configuring iOS Flavors

For iOS, the setup is a bit different.

  1. Open ios/Runner.xcworkspace in Xcode.
  2. In Xcode, go to the "Runner" project settings.
  3. Duplicate your existing scheme and name it according to your flavors (dev, staging, prod).
  4. Edit the build configuration for each scheme to match the corresponding flavor.
  5. Update the Info.plist files to include the appropriate configurations.

Wrap-Up

Flutter flavors are a powerful feature that helps you manage different environments and configurations seamlessly. By setting up flavors, you can maintain clean and organised code, reduce the risk of errors, and streamline the development and deployment processes. Whether you’re working on a simple app or a complex enterprise solution, flavors will enhance your workflow and allow you to deliver a polished product to your users.

Stay Updated with Our Blog

Follow our blog for more insights and updates on Flutter development.

Share

Integrating Google Tag Manager in a Flutter App