Flutter Flavours Blog

[shahzadafridi]

Post the blog there with correct styling

[shahzadafridi]

@Composable
fun SpannableText(
    modifier: Modifier = Modifier,
    annotatedString: AnnotatedString = AnnotatedString(text = ""),
    style: TextStyle = primaryLableStyle,
    onClickAction: (String) -> Unit
) {
    ClickableText(
        modifier = modifier,
        style = style,
        text = annotatedString,
        onClick = { offset ->
            annotatedString.getStringAnnotations(offset, offset)
                .firstOrNull()?.let { span ->
                    onClickAction.invoke(span.item)
                }
        })
}

[imziaafridi]

As a Flutter developer, you're constantly striving to build efficient and adaptable applications. But managing multiple app versions or environments can quickly become a challenge. Fear not! Flutter flavors come to the rescue, offering a powerful way to streamline your development process.

What are Flutter Flavors?

Imagine a single codebase that magically transforms into different app versions. That's the beauty of flavors. They allow you to define variations of your Flutter app, each tailored for a specific purpose. Common use cases include:

• Environment Configurations: Develop, stage, and production environments with distinct configurations (e.g., API URLs, logging levels).
• App Versioning: Create free and paid versions, or cater to different regions with localized content.
• Feature Flags: Experiment with features by enabling or disabling them selectively for different flavors.

The Benefits of Flavors

• Maintainability: Manage a single codebase, reducing boilerplate code and streamlining development.
• Efficiency: Effortlessly switch between environments or app versions during testing and deployment.
• Configuration Management: Isolate configuration details for each flavor, preventing accidental mix-ups.
• Testing Flexibility: Simplify testing by targeting specific flavors with tailored test cases.

Getting Started with Flavors

Here's a quick setup process for both ios and android:

Flavor Configuration Dart Files:

• Create a new folder named flavors at the root of your Flutter project.
• Inside flavors, create separate Dart files (e.g., dev.dart, prod.dart) for each flavor.
• In these Dart files, define variables or functions specific to each flavor. These can include:
  • API URLs (development, staging, production)
  • App names (different branding)
  • Colors (theming variations)
  • Feature flags (enable/disable features)
  • Firebase project IDs (connect to different projects)

Platform-Specific Configuration:

1. Android:

• Locate the android/app/build.gradle file.
• Flavors Configuration in build.gradle.
• Add / modify the following code block inside android block.

    flavorDimensions "default" 

    productFlavors {  

        prod {            
             resValue "string", "app_name", "Flavor-Prod"        
        }        
       
        dev {           
            resValue "string", "app_name", "Flavor-dev"
            applicationIdSuffix ".dev"
       }    
   }

Launch Configurations:

VSCODE: create .vscode folder at root of project directory inside this folder create lauch.json file and add configurations below:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "dev",
            "request": "launch",
            "type": "dart",
            "program": "lib/dev.dart",
            "args": [
                "--flavor",
                "dev",
                "target",
                "lib/dev.dart"
            ]
        },
        {
            "name": "prod",
            "request": "launch",
            "type": "dart",
            "program": "lib/prod.dart",
            "args": [
                "--flavor",
                "prod",
                "target",
                "lib/prod.dart"
            ]
        },
    ]
}

2. iOS Configuration (Xcode):

• Open your Flutter project in Xcode.

1. Go to Product -> Scheme -> Manage Schemes.. to create a new scheme for each flavor.

• Open manage Schemes to create a new scheme (+) for each flavor. by pressing plus button ' + ' located at button left corner.

2. Buid Configurations: Duplicate the default build configurations(Debug, Profile, Release). for each scheme (matching flavor names): got to → Runner(Proj-level) → info → Configurations

3. Go to Product -> Scheme -> Edit Schemas for Matching Buid Configuration for each (build, run, test, profile, analysis, archive).

4. Runner(Targets) → search for Product Bundle Identifier → add flavors suffix values with matching keys, such as below:

5. add bundle identifier at info.plist file: such as $(PRODUCT_BUNDLE_IDENTIFIER), below mentioned:

Flavors Setup Done Here.

Flavors App Icons Configurations:

flutter pub add flutter_launcher_icons

• add Asset images at project root directory for each flavors i-e prod.jpg.

• Create yaml files at project root directory for each flavors:

• Run the below command for auto generate icons for both android and ios:
• flutter pub run flutter_launcher_icons:main -f flutter_launcher_icons*

1. Android: Above icons config is enough.
2. iOS: Required More Customisations:

• Assets appicon. names is required for (Primary App Icon Set Name) → mentioned at fig(2). below.

fig(1).

• Runner(Targets) → Buil Settings → search for Primary App Icon Set Name →** add **the above Assets AppIcon for each keys (Debug, Profile, Release) such as Debug-dev → AppIcon-dev .. below mentioned:

fig(2).

Flavors App Names Configurations:

1. Android:

• go to → android/app/src/main/AndroidManifest.xml
• change android:lable to "@string/app_name" ... below mentioned at Fig(1)

Fig(1)

• go to → android/app/build.gradle
• add app_name inside resValue of flavors configuratiion. below mentioned at Fig(2).

Fig(2)

2. iOS:

• add usr-defined setting for app name such as i did below in fig(1).
• above '+' icon in fig(1) for creating user-defined setting.

Fig(1).

• at the end add fig(1). APP_DISPLAY_NAME to info.plist. below in fig(2) mentioned.

Fig(2).

Output:

Finally, we are done here the output for both android and ios are represented below:

• Android:

Development	Production	Both With Icons

• IOS:

Production	Development	Both With Icons

Conclusion:

Flutter flavors are a game-changer for managing complexity in your Flutter projects. By embracing flavors, you can ensure efficient development, streamlined workflows, and the ability to deliver exceptional applications that cater to diverse needs.

[shahzadafridi]

Article has been published: https://www.realtimecoding.com/blog/flutter/mastering-your-flutter-app-deep-dive-into-flavors