Flavours for Your Flutter App 1/2

Flavours, also known as build configurations in iOS, are a useful tool in Flutter app development. They allow developers to create separate environments within the same code base. With flavours, you can easily set up different versions of your app, such as a free and paid version, or test experimental features. For example, the free version may have basic functionality and ads, while the paid version offers additional features, different styles, and no ads. Flavours also enable you to try out new features without affecting your production code. By defining compile-time configurations and runtime parameters, flavours provide a way to customize your app's behaviour. This document guides how to set up Flutter flavours for both iOS and Android platforms.

Creating Flavours in Android

Setting up flavours in Android can be done in your project’s build.gradle file.

1. Inside your Flutter project, navigate to android/app/build.gradle.

2. Create a flavorDimension to group your added product flavors. Gradle doesn’t combine product flavors that share the same dimension.

3. Add a productFlavors object with the desired flavors along with values for dimension, and applicationId or applicationIdSuffix.

   • If you specify applicationIdSuffix instead of an applicationId, it is appended to the “base” application id.

  flavorDimensions "flavors"
    productFlavors {
        dev {
            dimension "flavors"
            applicationIdSuffix ".debug"
            versionNameSuffix "-debug"
        }
        prod {
            dimension "flavors"
        }
    }

Setting up launch configurations

Next, add a launch.json file; this allows you to run the command flutter run --flavor [environment name].

In VSCode, setting up the launch configurations can be done in 2 ways:

Method 1

1. In the root directory of your project, add a folder called .vscode.

2. Inside the .vscode folder, create a file named launch.json.

Method 2

1. In the VSCode sidebar, click on the Debug icon (represented by a bug symbol) or press Ctrl + Shift + D (Windows/Linux) or Cmd + Shift + D (macOS) to open the Debug view.

2. Click on the gear icon on the top left corner of the Debug view, and select "Flutter" from the dropdown menu. This will create a launch.json file specifically for Flutter debugging.

Modifying launch.json

1. By default, the launch.json file will contain a configuration named "Dart & Flutter". You can modify this configuration or add new configurations based on your requirements.

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "name": "songlib",
                "request": "launch",
                "type": "dart"
            }
        ]
    }
   

2. In the launch.json file, add a configuration object for each flavour. Each configuration has a name, request, type, program, and args key.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "songlib",
            "request": "launch",
            "type": "dart",
            "program": "lib/main.dart",
            "args": ["--flavor", "dev", "--target", "lib/main.dart" ]
        }
    ]
}

You can run your Flutter app either by clicking on the debug or by running the command flutter run --flavor dev

More information

For more information on creating and using flavours, check out the following resources:

• Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor Flutter Ready to Go

• Flavoring Flutter Applications (Android & iOS)

• Flutter Flavors Setup with multiple Firebase Environments using FlutterFire and Very Good CLI

Packages

For packages that support creating flavours, check out the following:

• flutter_flavor

• flutter_flavorizr

In the next article, I talk about Creating Flavours in iOS.