Create Different Type of Flavor on Flutter Application

Flutter is a versatile framework that empowers developers to build cross-platform applications with ease. One of its powerful features is the ability to create multiple flavors of your app. This is particularly useful when you want to manage different environments (e.g., development, staging, production) or create white-labeled versions of your application for different clients.

In this post, we’ll explore how to set up and manage flavors in a Flutter 3.27.1 project step by step, leveraging the latest features and updates in this version.

What Are Flavors in Flutter?

In the context of Flutter, flavors are essentially different configurations of your app that may vary in API endpoints, app names, icons, or any other environment-specific settings. These configurations allow you to:

Use different app names, package IDs, and icons.

Target different API environments (development, staging, production).

Customize app behavior for specific use cases.

Flutter 3.27.1 enhances flavor support with better integration in the build system, making the setup smoother than ever.

Setting Up Flavors in Flutter 3.27.1

Let’s create multiple flavors for a Flutter app. For this guide, we’ll set up development, staging, and production flavors.

Step 1: Configure Android Flavors

1. Update android/app/build.gradle: Add the flavor configurations under the android block. Flutter 3.27.1 ensures better support for Gradle versions.

android {
    ...
    flavorDimensions "default"
    productFlavors {
        dev {
            dimension "default"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
        }
        staging {
            dimension "default"
            applicationIdSuffix ".staging"
            versionNameSuffix "-staging"
        }
        prod {
            dimension "default"
        }
    }
}

1. Create Separate Resources for Each Flavor:
   Place different icons and configurations in directories like res/mipmap-dev, res/mipmap-staging, and res/mipmap-prod. Flutter 3.27.1’s build system ensures seamless resource handling.

2. Update android/app/src/main/AndroidManifest.xml:
   Use placeholders for app-specific values:
   

<application
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher">
</application>

Step 2: Configure iOS Schemes

1. Create New Schemes:
2. Open the iOS project in Xcode.

3. Go to Product > Scheme > Manage Schemes and duplicate the existing scheme for dev, staging, and prod.

4. Add Configurations in ios/Runner.xcodeproj:

5. Select the project in Xcode and go to the Info tab.

6. Add configurations for Debug-dev, Release-staging, and so on.

7. Set Build Settings for Each Flavor:

8. Update Bundle Identifier (e.g., com.example.app.dev, com.example.app.staging, com.example.app).

9. Use different xcassets for app icons and splash screens. Flutter 3.27.1 improves asset handling for iOS.

Step 3: Use Environment-Specific Configurations in Dart

1. Create a Dart Configuration File: Create a flavors.dart file to define environment-specific variables:

class FlavorConfig {
  final String name;
  final String baseUrl;

  static FlavorConfig? _instance;

  FlavorConfig._internal({required this.name, required this.baseUrl});

  static void initialize({required String name, required String baseUrl}) {
    _instance = FlavorConfig._internal(name: name, baseUrl: baseUrl);
  }

  static FlavorConfig get instance => _instance!;
}

1. Initialize the Flavor: Update the main method to initialize the flavor:

void main() {
  FlavorConfig.initialize(
    name: "Development",
    baseUrl: "https://dev.api.example.com",
  );
  runApp(MyApp());
}

1. Pass the Flavor During Build: Use the flutter run command with --flavor:

flutter run --flavor dev -t lib/main_dev.dart
flutter run --flavor staging -t lib/main_staging.dart
flutter run --flavor prod -t lib/main_prod.dart

Benefits of Using Flavors in Flutter 3.27.1

• Streamlined Development and Testing: Quickly switch between environments without modifying the codebase. Flutter 3.27.1 makes environment transitions smoother.

• Customization: Easily differentiate app branding for different clients or use cases.

• Scalability: Manage multiple app versions in a single codebase efficiently.

• Improved Performance: The enhanced build process in Flutter 3.27.1 optimizes flavor-specific builds, reducing build times.

Best Practices for Flavor Management

• Use Environment Files: Maintain separate environment files for each flavor to manage configurations effectively.

• Automate Builds: Use CI/CD tools like GitHub Actions or Bitrise to automate flavor builds.

• Document Flavors: Clearly document the purpose and configurations of each flavor for your team.

Conclusion

Setting up flavors in a Flutter app with version 3.27.1 is more efficient and powerful than ever. By leveraging its enhanced build tools and configurations, you can create and manage multiple app versions tailored to your needs effortlessly.

If you found this guide helpful, feel free to connect with me for more insights and discussions:

GitHub: Sohanuzzaman Soad

LinkedIn: Sohanuzzaman Soad

Happy coding! 🚀