Flutter: flavors launcher icons made simple

Anyone that has already dealt with flavors in Flutter knows that they are not such an easy thing to implement.

You usually end up reading a lot of articles, going back and forth between your favorite IDE and Xcode, looking at configuration in your build.gradle and then crying over Xcode build configs...

But one thing is pretty easy to do when using flavors : generating appropriate launcher icons for both platforms, for all resolutions and obviously each flavor.

Supposing we have development, integration and production flavor, what we want to do in the end is have all these icons for Android:

And the same goes for iOS:

I don't know about you, but I really don't want to generate all these icons by hand... so we will instead use the great Flutter plugin flutter_launcher_icons !

As it is just a generator that we will use once, we don't need it at runtime so we can add it to our pubspec.yaml dev_dependencies:



dev_dependencies:
  ...
  flutter_launcher_icons: ^0.8.1

Now we will need to configure the assets location for each flavor:

flutter_launcher_icons-development.yaml:



flutter_icons:
  android: true
  ios: true
  image_path: "assets/launcher_icon/launcher-icon-dev.png"

flutter_launcher_icons-integration.yaml:



flutter_icons:
  android: true
  ios: true
  image_path: "assets/launcher_icon/launcher-icon-int.png"

flutter_launcher_icons-production.yaml:



flutter_icons:
  android: true
  ios: true
  image_path: "assets/launcher_icon/launcher-icon-prod.png"

Now that we have our plugin configured for each flavor, it's time to add our actual icons in our assets:

As you probably understood already, the next step will generate all the icons shapes and resolutions as needed by each platform. This process will take our source icon for each flavor and will downscale it to create all resolutions. This is important because it means you should provide the highest resolution of 1024x1024 for source icons.

Note: at this point our assets are not related to anything, i.e. not used by either Android or iOS, so we need to translate them in their respective format:

Let's do just that by invoking a run of our plugin:



flutter pub get
flutter pub run flutter_launcher_icons:main -f flutter_launcher_icons*

After a few seconds, you should get a result similar to this one:



════════════════════════════════════════════
   FLUTTER LAUNCHER ICONS (v0.8.0)
════════════════════════════════════════════

Flavor: development
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Building iOS launcher icon for development

Flavor: integration
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Building iOS launcher icon for integration

Flavor: production
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Building iOS launcher icon for production

✓ Successfully generated launcher icons for flavors

And voilà, you now have brand new icons for all platforms, flavors and resolutions conbinations.

Pretty neat, right ?

As a side note, the plugin is also able to generate adaptative Android icons by providing adaptive_icon_background and adaptive_icon_foreground for Android, which I highly recommend !