DEV Community

loading...
Cover image for Flutter: flavors launcher icons made simple
Stack Labs

Flutter: flavors launcher icons made simple

pommedouze profile image Λ\: Olivier Revial ・3 min read

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:

flutter-flavor-android

And the same goes for iOS:
flutter-flavor-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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

flutter_launcher_icons-integration.yaml:

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

flutter_launcher_icons-production.yaml:

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

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

Capture d’écran 2021-01-08 à 16.18.17

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*
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 !


References

Discussion

pic
Editor guide