Create Flavors for Flutter App - iOS
Tags: flutter, dart, beginners, ios
Published: 2024-04-13 20:33:03


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 😁.

Note: It's better to save this for later reference. 

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](https://docs.flutter.dev/deployment/flavors#launching-your-app-flavors).

## 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.

![iOS Folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onsqxgik2nafj3gp73ks.png)

-----

### 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`. 

{% youtube WEASQLPvrKs %}

{% youtube sFOrRQmp3GU %}

-----

### 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.

{% youtube 6BQCr3RXGFE %}

{% youtube 6FO1ejkfuPY %}

-----

### 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.

{% youtube N8VsUrd-bmA %}

-----
### Step 5

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

{% youtube amiPEh_WCQU %}

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.

{% youtube BUhhEKrtMVo %}

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.

{% youtube 8Cm05iyUhXM %}

----

### 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.

{% youtube oIUDuWo-_bs %}

---

### 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](https://www.appicon.co/) for this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvb7m8y4nrzn00zrad2z.png)

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.

{% youtube Yv2ceg8dt-A %}

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

{% youtube KnA0gQcSKCg %} 

> 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bk7qsaxyujbqdu81y9k.png)

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.

![Simulator Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvg2mtdilzycrwv228s0.png)