Easily build flavors in Flutter (Android and iOS) with flutter_flavorizr

One month ago I’ve been working on a Flutter project for a client who tipically asks me of different flavors for its applications. This was the first time I’ve worked with flavors in Flutter, and it’s been pretty tedious.

What are flavors meant for?

Essentially you could use flavors for plenty use cases. For example, you might want to build one version of your app that’s free, with a limited set of content, and another paid version that includes more. In my case I needed to create the same very app, with graphical and button behavior customizations (and a different app name and package name of course).

Lack of documentation in Flutter

The flutter documentation doesn’t help so much, they simply attached some articles found on the internet. Some articles are already obsolete, some of them simply do not work. The only one which really helped me a lot was this one created Animesh Jain. Thank you Animesh, you did a great job!

It’s not as simply as it seems

The error is right behind the corner. The process of manually creating flavors covers three technical areas: you have to adapt your source code for Android, iOS and Flutter. I won’t go deeply explaining the reasons why you should avoid it doing manually: it’s easy to make mistakes, there are too many variables and the troubleshooting process it’s not as simply as it seems, especially in the first time.

It only takes 3 minutes!

You could manually create your flavors using the Animesh’s guide, or you could be smart enough to use my library: flutter_flavorizr. The development of this library was not that simple, I struggled a lot especially on the iOS side: to manipulate the iOS project I needed to integrate an external library Xcodeproj developed by the Cocoapods team, written in Ruby.

Setting up a new Flutter project

Flutter flavorizr works better for new and clean project. Let’s create a new one.

Now we need to add flutter_flavorizr as a dev dependency in our pubspec.yaml file

dev_dependencies:
  flutter_flavorizr: ^1.0.2

and download the library with pub get

pub get

Configuring flutter_flavorizr

We are going to create two different flavors, the first one will be apple, the second one will be banana. Again, we need to edit the pubspec.yaml file and add the flutter_flavorizr configuration.

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

  flavors:
    apple:
      app:
        name: "Apple App"

      android:
        applicationId: "com.example.apple"

      ios:
        bundleId: "com.example.apple"

    banana:
      app:
        name: "Banana App"

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

The apple flavor will have:

• App name: Apple App
• Android application id: com.example.apple
• iOS bundle id: com.example.apple

The banana flavor will have:

• App name: Banana App
• Android application id: com.example.banana
• iOS bundle id: com.example.banana

You could customize the flavorizr process, but in this example I’m going to cover the basic case scenario. For example, the default process creates dummy icons and resources for each flavor, you could disable this feature. You could also redefine the flavorizr process, for instance you could exclude the iOS flavorization and flavorize only the Android and Flutter part of your project. It’s really up to you. For further details, you will find really everything on the library project page readme.

Prerequisites if you are flavorizing iOS

Before running Flutter Flavorizr, you must install the following software:

• Ruby
• Gem
• Xcodeproj (through RubyGems)

These prerequisites are needed to manipulate the iOS project and schemes. If you are interested in flavorizing Android only, you can skip this step. Keep in mind that you will have to use a custom instructions set with Android and Flutter processors only, otherwise an error will occur.

Run and fun!

That’s it, once you defined the flutter_flavorizr configuration, you can launch the library by running

flutter pub run flutter_flavorizr

The library will create and manipulate some files in your project. When the process is finished, you will be able to launch your flutter flavors.

flutter run --flavor apple -t lib/main_apple.dart
flutter run --flavor banana -t lib/main_banana.dar

Customize your app

As we can see, flutter_flavorizr have created different dart files in the lib folder.

The main_apple.dart and main_banana.dart are our app starting point, while the full app customizations reside in the flavors.dart file.

Here we have an enum containing all of our defined flavors. Below we have the F class which contains all of our customizations. The process creates a simple title customization: a switch which checks the current appFlavor (defined in our app starting point) and returns the correct value.

Here you can write whatever you want, you can create your custom app color palette, differentiate the URL action of a button, and so on. The fantasy is your only limit.

If you are wondering how to use these getters, you can find an example under the pages folder: in the my_home_page.dart file, the page shown after the launch of the app, we can see a clear reference on the title getter defined in the F class.

Thank you for reading!

And you did it! You have flavorized your project in nothing more than 3 minutes! If you want to dive into more customization scenario, you can follow the Animesh article, which is pretty straightforward and covers many aspects of the flavorization process.