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
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 :)
Top comments (1)
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.