Review: flutter_launcher_icons. Everything you need to create an application icon in Flutter

Roman Cinis
3 min readAug 25, 2019

--

Introduction

If you are not satisfied with the default application launcher icon, that is generated by Flutter for your application — there is a simple AIO solution made by the “Flutter Community” developers, who are perhaps the most trusted among package developers (just after the “Dart Team” of course). The procedure is quite simple, and you can see it here (the video corresponds to this text content below).

Prerequisites

Before we begin with the generation of icons for both platforms, you will need to prepare images that the package will process. Complete documentation for app icons can be found on the following official websites:

In any case, when exporting from a graphics editor, it should be:

  • PNG bitmap,
  • image size up to 1024x1024 pixels (Apple App Store icon size requirement),
  • sRGB color profile,
  • max. 1024KB,
  • without interlacing,
  • select the smoothing, resampling, according to the input data or the image content,
  • PPI is not defined, but should not be less than 72, personally I leave the choice at 120–144 (as “future proof”),
  • 24-bit color depth (we don’t need 32, because Apple wants assets without an alpha channel (an additional 8bit), i.e. no transparency).

Android can tolerate transparency and moreover there is a possibility to use so-called “Adaptive icons”.

Adaptive icons are icons that can adapt their appearance to any shape. This new format has been introduced with Android 8.0 Oreo. For example, an adaptive launcher icon can display a circular shape on one OEM device, and display a squircle on another device. You can control the look of your adaptive launcher icon by defining 2 images, consisting of a background and a foreground. So in our case — all you may need is a background.png and a foreground.png. You can test your adaptive icon images on this page:

Package installation and commissioning:

We will use a package called flutter_launcher_icons

Copy your images (i.e. PNG file(s)) to your Flutter project folder, for example, create a “launcher” folder in the “assets” folder (which usually serves your project files) and place the PNG files there.

  • In your IDE or text editor, open the file:
pubspec.yaml

which is located in the root directory of your Flutter project. Add the following code:

dev_dependencies: 
flutter_launcher_icons:

flutter_icons:
ios: true
android: true
image_path_ios: "assets/launcher/icon.png"
image_path_android: "assets/launcher/icon.png"
adaptive_icon_background: "assets/launcher/background.png"
adaptive_icon_foreground: "assets/launcher/foreground.png"

A few notes: I leave flutter_launcher_icons unversioned (I want to keep the package up-to-date, the project itself is not covered by the package, so there is you do not risk the functionality of your project). ios/android true — will swap default icons with yours, image_path… are paths to icons. The last two lines are optional — you may only need them for creation of adaptive icons (see above). The pubspec.yaml file itself is very sensitive to the spacebar (not tab) hierarchy, so insert and edit parameters very carefully.

  • In the terminal, from the project root folder run:
flutter packages get

or just simply save the changes (for example, in Visual Studio Code).

  • To start creating icons, use the following command:
flutter packages pub run flutter_launcher_icons:main
  • Check the icon appearance with the last command:
flutter run

--

--

Roman Cinis
Roman Cinis

Written by Roman Cinis

I'm a multiple-time Google-awarded Flutter/Dart developer, with a great love for interactive animations and good UX. Big Rive fan.

Responses (1)