A Guide to Flutter Flavors — Part 4

5 min readNov 5, 2023

Flutter Flavors Configurations For iOS

We’re going to build two distinct Flutter mobile apps using the same codebase. One will be named Harry Potter, and the other will be Narnia. We'll assign them the flavor names harrypotter and narnia respectively. The harrypotter flavor will use the com.example.harrypotter bundle identifier, while the narnia flavor will use the com.example.narnia bundle identifier. To ensure everything runs smoothly, we'll need to configure flavors for iOS.

Open the project in XCode:

Manage Schemes → Rename the default scheme (Runner) with one of your flavor (harrypotter) then, add a new scheme for your other flavors (narnia):

Go to Project Runner → Info Tab → Create debug, profile, release configurations for each flavor. You can easily add these by duplicating the default ones:

Manage Schemes → Edit flavors to match the configurations created above:

Go to Target Runner -> Build Settings → All and Combined Tabs → Search for Bundle Identifier → Set the Bundle Identifiers for your flavors:

Go to Target Runner -> Build Settings → All and Combined Tabs → Search for Product Name→ Set the Product Names to match your flavors (Note that Product Name does not represent the Application Name):

Open Info.plist → Set Bundle Name to $(PRODUCT_NAME):

Go to Target Runner -> Build Settings → All and Combined Tabs → Add a New User-Defined Setting called APP_DISPLAY_NAME, which will be used to customize and change the iOS Application Name for each flavor:

Open Info.plist → Set Bundle Display Name to $(APP_DISPLAY_NAME):

The flavors are all set! However, there is one more thing to address. We need to change the application icons based on the selected flavor. To achieve this, we should go to the pubspec.yaml file and include the flutter_launcher_icons package:

dev_dependencies:
  flutter_launcher_icons: ^latest_version

To generate the application icons, you’ll need to prepare two separate configuration files: flutter_launcher_icons-harrypotter.yaml and flutter_launcher_icons-narnia.yaml. These files will specify the icon details for each flavor:

flutter_launcher_icons-harrypotter.yaml:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: 'assets/images/harrypotter.png'
  remove_alpha_ios: true

flutter_launcher_icons-narnia.yaml:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: 'assets/images/narnia.png'
  remove_alpha_ios: true

Finally, you can generate the icons by running the following command in your terminal:

flutter pub run flutter_launcher_icons:main -f flutter_launcher_icons*

You can see the generated icons here:

Finally, to set the generated icons for the corresponding flavors, navigate to Target Runner -> Build Settings → All and Combined Tabs → Search for Primary App Icon Set Name, then set the icon names to match your flavors:

You’ve successfully set up the Flutter Flavor Configurations for iOS!

You can run the Flutter apps with the flavors in debug_mode like this:

flutter run --debug --flavor harrypotter --target lib/main_harrypotter.dart
flutter run --debug --flavor narnia --target lib/main_narnia.dart

You can run the Flutter apps with the flavors in release_mode like this:

flutter run --release --flavor harrypotter --target lib/main_harrypotter.dart
flutter run --release --flavor narnia --target lib/main_narnia.dart

You can build the Flutter apps with the flavors like this:

flutter build ipa --release --flavor harrypotter --target lib/main_harrypotter.dart
flutter build ipa --release --flavor narnia --target lib/main_narnia.dart

The build command creates an archive for the flavor in the [PROJECT_NAME]/build/ios/archive directory. When you double-click the generated archive file, it will open Xcode. From there, you can proceed with your release process: