How to make your Flutter App feel more professional with Adaptive icons

Hey there 👋

In this post, I will show you how to create and use adaptive icons for Android Apps built with Flutter. Adaptive icons can make your app feel more professional (you still need a good logo and app though 😉).

*Note that adaptive icons only work for Android.

What are adaptive icons?

This is what the people at Android say about them:

Adaptive launcher icons can display a variety of shapes across different device models. For example, an adaptive launcher icon can display a circular shape on one OEM device, and display a squircle on another device. Each device OEM provides a mask, which the system then uses to render all adaptive icons with the same shape. Adaptive launcher icons are also used in shortcuts, the Settings app, sharing dialogs, and the overview screen.

How are they created?

Well as opposed to normal icons, adaptive icons are built from 2 layers.

• The background layer is an image that can be anything from a solid color to a random pattern! Though I would suggest keeping it simple.

• The foreground layer should contain your app icon, and should not have a background.

Layers must follow these guidelines:

• Both layers must be sized at 108 x 108 dp.
• The inner 72 x 72 dp of the icon appears within the masked viewport.
• The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.

You can check the guide on how to design adaptive icons by google-design over on medium for an in-depth guide.

Layers example

This is how the layers look for one of my apps.

Background layer

Note that in Flutter we can provide a hex code for the background layer instead of an image.

Foreground layer

The foreground should be transparent (apart from the icon of course). I had to add the checker pattern as the icon was white and would not be shown on white background pages like here on DEV.to.

Setting it up in Flutter

The first thing we will need is to add the flutter_launcher_icons dependency to our project.

pubspec.yml

dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

 Save the icon layers in the assets folder

For example under /assets/launcher_icon. This folder will contain:

• background.png
• foreground.png

Config for flutter_launcher_icons

Now that we have installed flutter_launcher_icons, and have the layers stored in the assets folder, we can add the appropriate configuration. This can be done in a couple of ways:

• Adding it to the pubspec.yml
• Or creating a file only containing the flutter_launcher_icons configuration flutter_launcher_icons.yaml as explained here
  • There is also support for different icons per flavor (read more)

In any of the cases the contents would be the same:

...
flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/ios_icon.png" # Provide icon for ios 
  adaptive_icon_background: "assets/launcher_icon/background.png"
  adaptive_icon_foreground: "assets/launcher_icon/foreground.png"
...

As mentioned previously, we could also provide a hex color code instead of the background:

...
flutter_icons:
  ...
  adaptive_icon_background: "#ed1e79"
...

Run flutter_launcher_icons

With the configuration setup, we can run flutter_launcher_icons and let it set up all the things it needs (generate the drawables and resources needed) by running:

$ flutter pub run flutter_launcher_icons:main

That's it, let's see how that looks shall we?

This is how it, now we can re-launch our Flutter app and check how it looks!

More resources

• Understanding Android Adaptive Icons
• Designing Adaptive Icons
• Android Adaptive icons guide
• flutter_launcher_icons

Hope you found this useful! Until next time 👊