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.
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.
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.
This is how the layers look for one of my apps.
Note that in Flutter we can provide a hex code for the background layer instead of an image.
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.
The first thing we will need is to add the flutter_launcher_icons dependency to our project.
dev_dependencies: flutter_launcher_icons: "^0.9.2"
For example under
/assets/launcher_icon. This folder will contain:
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
- Or creating a file only containing the flutter_launcher_icons configuration
flutter_launcher_icons.yamlas 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" ...
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!
- Understanding Android Adaptive Icons
- Designing Adaptive Icons
- Android Adaptive icons guide
Hope you found this useful! Until next time 👊