Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor

[update March 7, 2020]
- added instructions for different app icons for different flavors in iOS and Android
[/update]

Why do you need flavors

A note on documentation on Flutter flavors

  • Build upon the above articles and also explain how to setup different Firebase projects for different flavors
  • Do a deeper dive into the iOS flavor setup, with steps explained more clearly so that you don’t have to spend about as much time I did trying to get it to work.

The approach for this tutorial

Step 1: Initialize a default flutter app

default flutter project

Step 2: Configure the app to connect to Firebase

create a new Firebase project called Flavor Test Dev
the counter is now connected to Firebase Realtime Database
Code Diff : Step 1 to Step 2https://github.com/animeshjain/flavor_test/compare/step_1_init...step_2_firebase

Step 3: Adding build flavors to Android

Dev and Prod are separate projects, so that they can have separate realtime DB instances
So this gives us a hint that we need to add product flavors to our build.gradle
adding product flavors dev and prod to the app/build.gradle
https://firebase.google.com/docs/projects/multiprojects
  • Different app id’s for different flavors, so that all flavors can be installed simultaneously on the device
  • Different application names for different flavors, so that users/testers/developers can easily differentiate
  • Each flavor pointing to its own Firebase project (this is automatically taken care of by the convention of placing the files in folders names the same as flavors)
Code Diff : Step 2 to Step 3https://github.com/animeshjain/flavor_test/compare/step_2_firebase...step_3_android_flavors

Step 4: Adding build flavors to iOS

Xcode has the concept of schemes and build configurations as a parallel to product flavors in Android
Create a new scheme called “dev”
Duplicate build configuration to create “Debug-dev” and similar
Rename default scheme and build configurations to “prod”
Connect “dev” build configurations to “dev” scheme
Update Bundle Identifier for prod build configurations
Could not find the built application bundle at build/ios/iphoneos/Runner.app
<dict>
...
<key>CFBundleDisplayName</key>
<string>$(APP_DISPLAY_NAME)</string>
...
</dict>
Set a custom App Display Name per build configuration
Copy GoogleServices-Info.plist files to a separate config directory, and link to that directory in XCode
Create a Run Script build phase to copy GoogleServices-Info.plist to the default location in app package
Code Diff : Step 3 to Step 4https://github.com/animeshjain/flavor_test/compare/step_3_android_flavors...step_4_ios_flavors

Step 5: Adding different app icons for different flavors

  • Steps for Android
Both Flavors installed on the same device
  • Steps for iOS
Different AppIcons for different build configs in Xcode
Vola!

Supplementary resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Animesh Jain

Animesh Jain

player of basketball, eater of vegetarian food, maker of Chips of Fury