How to make your Flutter App feel more professional with Adaptive icons
Tags: flutter, dart, beginners, tutorial
Published: 2021-10-22 12:47:47


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5suxn376shnql5kw1fp8.gif)


## 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](https://medium.com/google-design/designing-adaptive-icons-515af294c783) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bcz8yd8boqbvshno9tt.png)

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

**Foreground layer**
![Adaptive icon fg layer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jwvi2x2jwwsejsnlnfy.png)

> 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](https://pub.dev/packages/flutter_launcher_icons#mag-attributes) dependency to our project.

`pubspec.yml`
```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](https://pub.dev/packages/flutter_launcher_icons#book-guide)
  * There is also support for different icons per flavor ([read more](https://pub.dev/packages/flutter_launcher_icons#flavor-support))

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

```yml
...
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:
```yml
...
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](https://medium.com/google-design/understanding-android-adaptive-icons-cee8a9de93e2)
* [Designing Adaptive Icons](https://medium.com/google-design/designing-adaptive-icons-515af294c783)
* [Android Adaptive icons guide](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive)
* [flutter_launcher_icons](https://pub.dev/packages/flutter_launcher_icons)


----

Hope you found this useful! Until next time 👊