DEV Community

Cover image for How to make your Flutter App feel more professional with Adaptive icons
Keff
Keff

Posted on

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.

Adaptive icon visualization

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
Adaptive icon bg layer

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

Foreground layer
Adaptive icon fg 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"
Enter fullscreen mode Exit fullscreen mode

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

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

...
flutter_icons:
  ...
  adaptive_icon_background: "#ed1e79"
...
Enter fullscreen mode Exit fullscreen mode

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

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


Hope you found this useful! Until next time ๐Ÿ‘Š

Discussion (0)