Customizing Flutter App with Flavors for Different Environments

Author: Mobisoft Infotech

Customize your Flutter app with flavors to target multiple environments like staging and production.Establishing various environments, including Development (dev), Demo (staging), and Production (prod), is a fundamental practice in Flutter app development for mobile applications. Each environment has a distinct role, enabling teams to effectively manage and deliver applications while ensuring high standards of quality.

Benefits of Creating Multiple Flavors

1. Enhanced Collaboration and Workflow

  • Independent Development: Developers can operate within their own development environment without disrupting others.
  • Isolated Testing: QA teams and stakeholders can perform tests in a demo or flutter app for staging environment, free from interference from ongoing development activities.
  • Stable Production: The production environment remains stable and insulated from potential issues arising during development.

2. Tailored Configuration

  • Different configurations (e.g., API endpoints, database connections, analytics tools) can be applied to each environment.
  • Feature flags can be tested in staging without enabling them in production.

3. Faster Troubleshooting

  • Developers can reproduce and debug issues in the flutter app development or staging environment without impacting production.
  • Logs and metrics from different environments provide clearer insights into problems.

4. Efficient Deployment Process

  • Automated Pipelines: Flutter app builds can be deployed to designated environments through automated pipelines, ensuring consistent and repeatable releases.
  • CI/CD Advantages: Continuous Integration and Continuous Deployment (CI/CD) practices thrive with clearly defined environments.

In this tutorial, I’ll guide you step-by-step through the process of adding Multiple Flutter Flavors in the Flutter application using flutter_flavorizr Package. Let’s dive in!

Prerequisites:

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

These prerequisites are needed to manipulate Flutter flavor for the iOS and macOS projects and schemes. If you are interested in flavorizing Android only, you can skip this step.

Steps 1 -: Installation

Add the flutter_flavorizr: ^2.2.3 package to the dev_dependencies section of your project’s pubspec.yaml file, and then run the flutter pub get command to install the dependency, as demonstrated below:

Step 2 -: Create flavors

After installing all the necessary prerequisites and adding flutter_flavorizr as a development dependency, you will need to modify your pubspec.yaml file to define the flavors like below.

flavorizr: flavors: dev: app: name: "FlavorSample" android: applicationId: "com.mobisoft.flavorsampleapp" ios: bundleId: "com.mobisoft.flavorsampleapp" demo: app: name: "FlavorSample" android: applicationId: "com.mobisoft.flavorsampleapp" ios: bundleId: "com.mobisoft.flavorsampleapp" prod: app: name: "FlavorSample" android: applicationId: "com.mobisoft.flavorsampleappprod" ios: bundleId: "com.mobisoft.flavorsampleappprod"Code language: CSS (css)

Once the flavor is defined, it will appear as follows.

You can assign a unique bundle ID or package name to each flavor, as I did for the production environment by using a distinct bundle ID.

Step 3-: Executing the Flavorizr Script with flutter pub run

Having defined the Flavorizr configuration, we can now move forward by running the script with the command flutter pub run flutter_flavorizr

Upon executing the command, you will notice that the following files have been generated in the lib folder: flavors.dart, app.dart, main_dev.dart, main_demo.dart, and main_prod.dart. Additionally, a pages folder will be created, containing the my_home_page.dart file.

The script will remove the default generated code from the main.dart file, which may result in an error in the widget_test.dart file located in the test folder. To fix this, simply replace the error code with await tester.pumpWidget(const App());

Typically, we prefer to create our own screens. Therefore, I am deleting the script-generated my_home_page.dart and app.dart files. However, if you wish, you can choose to use them and continue with this setup

Step 4 -: Organizing and Configuring Flavor Files for Setup and Initialization

Ream More : Customizing Flutter App with Flavors for Different Environments