Flavoring in Flutter

Flavors are mainly use for build your app in different environment like sandbox, staging, production or development. For this tutorial will be use Flutter and flutter_flavorizr as an example.

Table of Contents

• Why
• How
• Explanation
• Start & Build Apps
• Extra: Firebase Setup

Why

Because in different environment, can have different variables such as API URL staging is point to https://staging.xxx.com and production is point to https://api.xxx.com. It still can be many variables instead only API URL.

How

First we create a new project by running

$ flutter create <project_name>

And you will have a flutter project, and go to pubspec.yaml under the project then create your own flavor based on example below. Remember to add package flutter_flavorizr: ^1.0.3 to dev_dependencies.

name: flavoring_flutter
description: A new Flutter project.
publish_to: "none"
version: 1.0.0+1

flavorizr:
  app:
    android:
      flavorDimensions: "flavor-type"
    ios:

  flavors:
    sandbox: # Flavor Name
      app:
        name: "Sandbox App" # Application Name

      android:
        applicationId: "com.example.sandbox" # Package Name

      ios:
        bundleId: "com.example.sandbox"

    production:
      app:
        name: "Production App"

      android:
        applicationId: "com.example.production"
      ios:
        bundleId: "com.example.production"

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_flavorizr: ^1.0.3
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Based on the example it will create 2 flavor. One is sandbox with name Sandbox App and package com.example.sandbox. The other one is production with name Production App and package com.example.production.

Warning

Before creating flavor with defined pubspec.yaml, i prefer you to create a new branch for this. For preventing you wrong input name or application id, mainly for those don't really know how native structure work. Since it's still change-able if you know how to do it. And this command will only need to run once, if you run multiple times may cause issues.

So when everything done, we will get into start creating flavor. You need to install (ruby & gem)[https://www.ruby-lang.org/en/downloads/] in order to run flavorizr.

$ flutter pub run flutter_flavorizr

After running the command, you will see some new files with named main-${flavor}.dart and flavors.dart in your projects.

Explanation

Under file flavors.dart, you will have class below.

enum Flavor {
  SANDBOX,
  PRODUCTION,
}

class F {
  static Flavor appFlavor;

  static String get url {
    switch (appFlavor) {
      case Flavor.SANDBOX:
        return 'https://staging.xxxx.com';
      case Flavor.PRODUCTION:
        return 'https://api.xxxx.com';
      default:
        return '';
    }
  }

  static String get title {
    switch (appFlavor) {
      case Flavor.SANDBOX:
        return 'Sandbox App';
      case Flavor.PRODUCTION:
        return 'Production App';
      default:
        return 'title';
    }
  }
}

Inside flavors.dart, you can add your own variables and do the checking variable for sandbox & production. Way to get the variable is F.url, it's static access to those variables. How this work? it because when you start your app you need to specify flavor & main file. etc. flutter run --flavor sandbox -t lib/main-sandbox.dart. Inside main-${flavor.dart} you will have to specify which flavor to use, flavorizr have help you to specify already so just run the command can start the application already.

Start & Build Apps

Start & Build the apps will need to add extra parameters to flutter run and also flutter build. You can just replace the ${flavor} to your named flavor will just work.

$ flutter run --flavor ${flavor} -t lib/main-${flavor}.dart
$ flutter build appbundle --flavor ${flavor} -t lib/main-${flavor}.dart

Extra: Firebase Setup

For firebase setup will need make it work with package name. When you start the app with firebase setup may receive error like. Invalid package name or cannot found google_services.json. So will need to add to android/app/src/${flavor}/google-services.json based on package name, you can create multiple android apps under firebase.

Lastly, these just some simple explanation about the flavor in flutter. Hope this help you when working with it and have a nice day :)

Comments

[Phanith]

Now that package have released version 2 and also support firebase multiple env but can't understand how to working on it if anyone understand it please explain me as well.