Flutter Flavors Simplified: Your Guide for Conveniently Building Configurations

Welcome Flutter developers! In this technical, yet reader-friendly blog post, we will be discovering the benefits and intricacies of using Flutter flavors for creating separate environments within the same code base for an app. This guide will accurately detail the process of defining build configurations, implementing necessary files, and launching app flavors for both Android and iOS. Let's start our journey!

Unveiling the Concept of Flutter Flavors

As development processes become more elaborate and scalable, managing different environments like debug, beta, or production for the same Flutter app can become quite a task. This is where the beauty of Flutter flavors sparkles. Known as build configurations in iOS, Flutter flavors allow developers to create separate environments for their apps using the same code base.

How does this become helpful for the application development process? Suppose we need to create separate apps - one for testing experimental features (the dev flavor), and another for delivering the full-fledged production app (the prod flavor). Flutter flavors come as a rescue, set up both app versions without writing two separate apps.

Flutter flavors also let us define compile-time configurations and set parameters that are read at runtime. This feature helps customize the behavior of our app to suit the needs of specific versions or environments. The usage doesn't end here; you can even use Flutter flavors to develop different versions of your app like a free version with specific features and ads, and a paid version with additional features and no ads. All of which use the same code base!

Let's dive deeper into the prerequisites and steps required to set up and use these flavors in our Flutter project.

The Necessities for Setting up Flutter Flavors

The preparation phase before setting up Flutter flavors involves ensuring that a few prerequisites are in place. These primarily include having Xcode installed on your machine and an existing Flutter project where you are planning to add flavors. Once these are ensured, we can move forward to the actual process of creating and using Flutter flavors in iOS and Android environments.

‍

Creating and Using Flavors in iOS

Under iOS, the build configurations (or flavors) are created and managed using Xcode. The steps involved in this process might seem tedious but bear in mind the flexibility and control you gain over different versions of your app.

Step-by-Step Guide on Creating Flavors in iOS

1. Begin by opening your Flutter project in Xcode. Here you will find the option to define new schemes and build configurations. Navigate to Product > Scheme > New Scheme from the menu to add a new scheme. A scheme, in the Xcode context, describes how Xcode carries out different actions to the build process.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
     // Example code snippet
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
     

In this guide, we'll use "debug_dev" as an example for our dev scheme.

2. The next step is to duplicate the build configurations to differentiate between the default configurations that are already available and the new configurations for the dev scheme. You can do this by clicking on the plus button at the end of the Configurations dropdown list under the Info tab, and duplicate each configuration name (Debug, Release, and Profile).

3. To match your dev scheme, add -dev at the end of each new configuration name.

4. The newly created dev scheme can now be changed to match the build configurations already created. This can be done by navigating to your Runner project and clicking on Manage Schemes.

5. A pop-up window will open. Double click on the dev scheme. You'll modify each scheme to match its dev build configuration shortly.

That's it! You've successfully created your dev scheme!

Customization of Different Flavors in iOS

Now that we have set up our dev scheme, the next step is to customize it, for example, by adding a different bundle identifier for each flavor.

1. A bundle identifier uniquely identifies your application. In our case, we'll set the Debug-dev value to equal com.flavor-test.dev. You can change the app bundle identifier to differentiate between schemes. For example, append .dev to the -dev scheme value in Product Bundle Identifier.

2. Afterwards, head to the Build Settings in Xcode Project. Set the Product Name value to match each flavor. For the dev flavor, you could set it as Debug Dev.

3. Additionally, you need to add the display name to Info.plist. It can be done by updating the Bundle Display Name value to $(PRODUCT_NAME).

With these steps, you've set up and customized your dev scheme in Xcode, and established the build configurations for it. Congrats on this important milestone!

Plugin Configurations for iOS Flavors

If your Flutter app utilizes a Flutter plugin, it's vital to update the ios/Podfile. In this file, change the default for Debug, Profile, and Release to match the Xcode build configurations for the dev scheme.

The updated ios/Podfile would look similar to the following:

Copy
1
2
3
4
5
6
     project 'Runner', {
      'Debug-dev' => :debug,
      'Profile-dev' => :release,
      'Release-dev' => :release,
    }
     

Now your iOS app is fully equipped to represent different flavors, thanks to build configurations!

Creating and Using Flavors in Android

Adding flavors to your Android app can help you manage multiple versions or configurations of your app, from the same code base, each tailored for different use cases or environments!

Setting up flavors in Android involves adjusting parameters in the build.gradle file residing inside your project's android/app directory.

Guide on Setting Up Flavors in Android Through the Project’s build.gradle File.

1. Create a flavorDimension to group your added product flavors. Gradle doesn’t combine product flavors that share the same dimension.

Copy
1
2
     flavorDimensions "default"
     

2. Following this, add a productFlavors object with the desired flavors along with values for dimension, resValue, and 'applicationIdSuffix' or 'applicationId'.

Copy
1
2
3
4
5
6
7
8
     productFlavors {
        dev {
            dimension "default"
            resValue "string", "app_name", "dev flavor example"
            applicationIdSuffix ".dev"
        }
    }
     

In the productFlavors object,

• A resValue would specify where your app's name for each build is located.
• The applicationIdSuffix will be appended to the “base” application id, such as “.dev” for our dev flavor.

Now, your Android app is ready to handle different flavors.

Setting Up Launch Configurations

To conveniently work with your flavors in running and debugging modes, you will need unique launch configurations. A launch.json file allows you to run the command flutter run --flavor [flavor name].

Creation of the launch.json File in VSCode

1. In the root directory of your flutter project, add a folder called .vscode.

2. Inside the .vscode folder, create a file named launch.json.

Copy
1
2
3
4
5
6
7
8
     {
      // The root directory for your Flutter project
      "root": "C:/path/to/my/flutter/project",
      ".vscode": {
        // The launch.json file can be created here
      }
    }
     

3. In the launch.json file, add a configuration object for each flavor. Each configuration consists of a name, request, type, program, and args key. The args key should contain ["--flavor", "[flavor name]", "--target", "lib/main_[flavor name].dart" ].

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
     {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "dev",
          "request": "launch",
          "type": "dart",
          "program": "lib/main_dev.dart",
          "args": ["--flavor", "dev", "--target", "lib/main_dev.dart" ]
        }
      ],
      "compounds": []
    }
     

With this setup, you can now run the terminal command flutter run --flavor dev or you can set up a run configuration in your IDE.

This is how you can adequately manage your launch configurations.

Launching Your App Flavors

Once the flavors are set up, it's time to modify your app's Dart code to accommodate and consume these flavors. This gets done in the lib / main.dart file.

Let's take a look at how to do this:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
     void main() {
      // Choose the correct main_*.dart file per the flavor
      const String flavor = String.fromEnvironment('FLAVOR');
    
      if (flavor == 'dev') {
        runApp(
          DevicePreview(
            builder: (context) => const MyApp(),
          ),
        );
      } else {
        runApp(const MyApp());
      }
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
           title: 'My Flutter app',
           theme: ThemeData(scaffoldBackgroundColor: Colors.white),
           home: HomeScreen(),
        );
      }
    }
     

In the code above, I've created a Flutter function component MyApp that builds a MaterialApp. The void main() function checks the flavor set in the environment and decides which main_*.dart file to runApp with.

You can then test the setup using the flutter run --flavor dev command at the command line, or in your IDE.

More Information and Resources on Flutter Flavors

Flavors in Flutter are a powerful tool to add to your app development arsenal. Mastering them can result in efficient and scalable codebases for various app versions or environments.

To further deepen your understanding and practical knowledge of Flutter flavors, a variety of resources are available online, including comprehensive guides, example projects, and interactive tutorials. Exploring these resources will allow you to see walkthroughs of build flavors for both Android and iOS, learn about different strategies to deal with various scenarios, and even discover how to integrate Flutter flavors with Firebase or other services.

Packages Supporting Creation of Flutter Flavors

There are several excellent packages that not only simplify the creation of Flutter flavors but also offer additional functionality. Some noteworthy packages to consider are:

flutter_flavor: This package provides a set of widgets and helpers to easily support multiple flavors in a Flutter application.

flutter_flavorizr: As the name suggests, this package aims to simplify the entire flavor creation process for Flutter projects. With flutter_flavorizr, you can easily handle the build settings, app name, bundle identifier, and many more aspects of your Flutter flavors.

Flutter flavors offer you great flexibility when dealing with different app versions, environments, or features.

Conclusion

Harnessing the power of Flutter flavors can revolutionize the development process of your app. This feature allows you to manage different environments and versions efficiently, using a common code base. Be it controlling build settings, handling API URLs, or developing tailored versions of an iOS or Android app, Flutter flavors can effectively streamline these tasks.

This blog has walked you through the intricate details of setting up and using flavors for your iOS and Android Flutter apps, from the primary steps of environment setup to launching your app flavors. To continually improve, remember to explore more resources and experiment with the numerous packages available.