Flavors in flutter (Part -1)

Published in

FlutterFly

6 min readMar 24, 2023

Surprised & wondered😳 what Gordon Ramsay is doing here. Is it a cooking class???. No it not .

Flavors (known as build variants), allow you (the developer) to create separate environments for your app using the same code base. For example, you might have one flavor for your full-fledged production app, another as a limited “free” app, another for testing experimental features, and so on.

When planning for a Flutter app release, it’s important to setup different development environments:

development: used by developers while building the app
staging: used to distribute builds to the Q/A team and other product stakeholders/clients
production: used by all the users that download the live app from the App Store

Setting things up this way makes everyone’s life easier, and ensures that data in the production environment is not altered by mistake during development. 👍

In this article , i will be calling build variants or configurations as flavors.

Create a flutter project
Create config file
Build flavors for Android
Build flavors for IOS

1. Create a flutter project

Run flutter create flavor_poc to create a default flutter project.

2. Create config file

Create app_config.dart file in your project


import 'package:flutter/material.dart';

class AppConfig {

  final String appName;
  final ThemeData themeData;


  AppConfig({
    required this.appName,
    required this.themeData,
  });
}

Now for each flavor, we create the main file, used to start up the app

main_dev.dart : Our development flavor.
main_qa.dart : Our flavor to qa team.
main_production.dart: Our flavor to the production.

void main() {
  
final devAppConfig = AppConfig(
    appName: "Flavor dev ",
    themeData: ThemeData(primarySwatch: Colors.yellow),
  );
  ApiService().baseUrl = 'https://devapi.fedoraindia.in/api/';
  runWithAppConfig(devAppConfig);
}

Now in main.dartrename main function with runWithAppConfig which takes instance of AppConfig class.

void runWithAppConfig(AppConfig config) {
  runApp( MyApp(appConfig: config,));
}

class MyApp extends StatelessWidget {
  final AppConfig appConfig;
  const MyApp({super.key, required this.appConfig});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appConfig.appName,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

3. Build flavors for Android

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

Inside your Flutter project, navigate to android/app/build.gradle.
Create a flavorDimension to group your added product flavors. Gradle doesn’t combine product flavors that share the same dimension.
Add a productFlavors object with the desired flavors along with values for dimension, resValue, and applicationId or applicationIdSuffix.

The name of the application for each build is located in resValue.
If you specify a applicationIdSuffix instead of a applicationId, it is appended to the “base” application id.

    flavorDimensions "flavor_app"

    productFlavors {
        // name of the the flavor, in this case "dev"
        dev {
            // name of the dimension
            dimension "flavor_app"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
        }
        qa {
            dimension "flavor_app"
            applicationIdSuffix "qa"
            versionNameSuffix "-qa"
        }

        prod {
            dimension "flavor_app"
            applicationIdSuffix ""
            versionNameSuffix ""
        }
    }

Now we have defined flavours in app/build.gradle file .

Next step will defining name according to enivorment or flavors.

Create a two folders “dev” & “qa” in app/src and copy res directory from app/src/main and paste in new created folder respectively .

Now create strings.xml file in every flavour “values” folder as shown below.

Strings.xml code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Prod Flavor</string>
</resources>

Define app name according to flavor in strings.xml.

Now ,navigate to app/main/AndroidManifest.xml & remove app static name from android:label & define variable we created above in strings.xml as shown below.

Adding different app icons for different flavors

Sometimes just different names are not enough. You might want different app icons as well for a more clear visual distinction when multiple flavors are installed in a device.

For that navigate to app/src/dev/res & replace these icons folder with your set of icons folder.

Do same steps for qa & prod flavor also.

This is how the icons look on Android -

Setting up launch configurations

Now we will setup run configuration.

And with this, we should be done! Now we can run any flavor

Just select flavor configuration and run the app.

Congrats!!! You have successfully setup flavour in android

3. Build flavors for IOS

Open your project in Xcode.
Create a three custom schemes for three different environments: dev ,qa & prod.

Next steps are given below:-

Create Scheme: dev -> Create debug, release and profile configuration for this new scheme (Project Runner -> Configuration-> Duplicate debug, release and profile configs for dev scheme) and also for qa respectively & rename default to prod.

Manage scheme -> Assign correct configuration to its corresponding scheme.

3. Change bundle identifiers of debug, release and profile configurations according to product flavors(dev, qa) & leave prod flavors bundle id as its.

4. But still we haven’t changed app name yet. For that we have add new property in Info.plist file.

<dict>
…
<key>CFBundleDisplayName</key>
<string>$(APP_DISPLAY_NAME)</string>
…
</dict>

5.Now create a new user-defined setting with name “APP_DISPLAY_NAME” and insert your app name according to flavor configurations as shown below.