Flavoring in Flutter
Tags: android, tutorial
Published: 2020-06-08 14:42:17

Flavors are mainly use for build your app in different environment like *sandbox*, *staging*, *production* or *development*. For this tutorial will be use [Flutter](https://www.flutter.com/) and [flutter_flavorizr](https://pub.dev/packages/flutter_flavorizr) as an example.

# Table of Contents

* [Why](#why)
* [How](#how)
* [Explanation](#explanation)
* [Start & Build Apps](#start-and-build-apps)
* [Extra: Firebase Setup](#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`.

```yaml
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hvkod23haiqba750krhl.png)

# Explanation

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

```dart
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hqefsaj4oxoj3kdj3vi1.png)

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