Customizing Flutter App with Flavors for Different Environments

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:

• Ruby

• Gem

• Xcodeproj (through RubyGems)

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

Source Link: Customizing Flutter App with Flavors for Different Environments