A month of Flutter: awesome adaptive icons
Tags: flutter, tutorial, icons
Published: 2018-12-25 21:03:56

_Originally published on [bendyworks.com](https://bendyworks.com/blog/a-month-of-flutter-awesome-adaptive-icons)._

For this festive day of Christmas, I'm going to do something more fun and add a fancy icon. For android I will be using an [adaptive icon](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive) so that it looks good in any shape and has a nice wiggle of movement.

A big thank you goes to [@tommy_emo_](https://twitter.com/tommy_emo_) for creating this awesome design.

![Birb logo](https://thepracticaldev.s3.amazonaws.com/i/1y7386b57seqj9at3uav.png)

There is a nice [`flutter_launcher_icons` package](https://pub.dartlang.org/packages/flutter_launcher_icons) that makes the technical implementation easy.

To start, require `flutter_launcher_icons` as a `dev_dependency` in `pubspec.yaml`. Then there will be a new `flutter_icons` key added with several values.

~~~yaml
flutter_icons:
  android: true
  ios: true
  image_path_android: assets/icon/ic_launcher_xxxhdpi.png
  image_path_ios: assets/icon/ios.png
  adaptive_icon_background: assets/icon/ic_background.png
  adaptive_icon_foreground: assets/icon/ic_foreground.png
~~~

`android` and `ios` set to `true` specifies that the tool should build icons for both Android and iOS.

Then there are four images defined:

 - `image_path_android` will be used for the Android app and should be a full icon with transparent edges. This will get several sizes generated by the tool so I use the xxxhdpi size as the source image.
 - `image_path_ios` will be used for the iOS app and [should not have any transparent edges](https://stackoverflow.com/questions/26014461/black-border-on-my-ios-icon). It is the same as the adaptive icon but with both layers in one image.
 - `adaptive_icon_background` is the background scene of the adaptive icon. For Birb it's the sun and hills.
 - `adaptive_icon_foreground` is the forground of the adaptive icon. For Birb it's the bird.

Once those four images were added to the `assets/icon` directory I ran the `flutter_launcher_icons` tool to generate the correct assets and added all the changes to git.

~~~bash
$ flutter packages pub run flutter_launcher_icons:main
Android minSdkVersion = 16
Creating default icons Android
Overwriting the default Android launcher icon with a new icon
Creating adaptive icons Android
Overwriting default iOS launcher icon with new icon
~~~

The new icon on Android's home screen with a rounded square shape:

![Birb logo on Android home screen](https://thepracticaldev.s3.amazonaws.com/i/zgjlaxwaetj39dwvn3nj.png)

The new icon in Android's app switcher with a circle shape:

![Birb logo on Android app switcher](https://thepracticaldev.s3.amazonaws.com/i/kbt1w16u520aestl4fhx.png)

The new icon on iOS's home screen:

![Birb logo on iOS home screen](https://thepracticaldev.s3.amazonaws.com/i/aq50xc1q2u5fdcsbvp3w.png)

The new icon in iOS's app switcher:

![Birb logo on iOS app switcher](https://thepracticaldev.s3.amazonaws.com/i/010dcgjh0g10o9gff4p3.png)

## Code changes

- [#61 Add adaptive icons](https://github.com/abraham/birb/pull/61)