Create Flavors for Flutter App – iOS

Note: If you’re new to Flutter and find it tricky to sift through many resources on setting up flavors, this article is for you. Experienced Flutter developers might already be familiar with this so please feel free to skip this. If you just want to have a quick refresh then you can go through the videos 😁.

Have you ever wanted to manage different versions of your Flutter app for different needs? ‘Flavors’ in Flutter help you do just that. They’re similar to ‘build configurations’ in iOS. Using flavors, you can create a production version of your app for real users, a staging version for debugging, and a preview version for QA testing — all from the same code base.

To know more about ‘Flavors’ please go through the official documentation here.

Environment set up

• Prerequisites:
  • Xcode installed
  • An existing Flutter project

Creating flavors in iOS

Open your project in Xcode by going to the iOS folder and double-clicking on the Runner.xcworkspace file. This action will launch Xcode for your project.

Step 2

The second step would be to define schemes. Select Product > Scheme > New Scheme from the menu to add a new Scheme.

• A scheme describes how Xcode runs different actions. In this article we will define two schemes staging and production.

Step 3

Let’s duplicate the existing build configurations to create separate configurations for different flavors. This process involves replicating the default configurations and appending “staging” and “production” as a suffix.

Step 4

Let’s now edit the staging and production schemes to align with the newly created build configurations. Similarly, map the newly created build configurations to the production scheme.

Step 5

Now that we’ve got our staging and production flavors ready, we can assign different bundle identifiers for each.

Give it a shot—assign the bundle identifier for the production flavor yourself! 😁

Step 6

In the Build Settings, set the Product Name value to match each flavor. For example, add Todo Staging. For those unfamiliar, the product name in Xcode refers to the name of the app as it appears in the App Store and on devices once it’s installed. Also we will be using this product name in the next step.

Oops! no video for production😌. Please try to do it yourself!

Step 7

Add the display name to Info.plist. Update the Bundle Display Name value to $(PRODUCT_NAME). When we set the Bundle Display Name to $(PRODUCT_NAME), Xcode dynamically replaces it with the actual product name of our app during the build process.

Step 8

Now it’s time to setup our app icon for our staging flavor. When we create your project from a template, it automatically includes a default asset catalog (Assets.xcassets) that contains the AppIcon.

If we don’t have a default asset catalog or existing AppIcon or we want to add another, we can add an app icon to an asset catalog manually:

• In the Project navigator, select an asset catalog.
• Click the Add button (+) at the bottom of the outline view.
• In the pop-up menu, choose OS variant > OS variant App Icon. Xcode creates a new app icon set or image stack with the name AppIcon.

Step 9

Now that we’ve created the asset catalog, it’s time to add the icons. To ensure compatibility with all the sizes specified in Xcode, we’ll need to generate icons for each size. I typically use an app icon generator like appicon.co for this.

Once you’ve generated the icons, simply download them and then either drag and drop them directly into the new staging asset catalog in Xcode or into the designated folder, following the steps outlined in the video.

Next, we’ll need to associate the build configuration with the newly created app icon set name.

Please follow the same steps for production as well.

Step 10

“Hurray 🎉! We’re almost done. Now it’s time to test the changes we’ve made so far.

In Android Studio, add flavor configurations for both staging and production, as shown in the screenshot below:

Let’s try running the staging app. If everything works fine, you should see the app installed on your emulator, similar to the screenshot below.