Custom Flutter Launcher Icon

Image Credit: Pixabay From Pexel

Table Of Contents

• Introduction
• Selecting Appropriate Icon
• Flutter Package
• Summary

🎇 Introduction

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

By default, Flutter ships its own app icon similar to the image above (well, not coupled with the name 'Flutter' of course 🤣), for every newly created application.

If not for demo purpose, say you wish to build a real-life application, you would definitely need to change the said default icon to your personalized version. And that is the aim of this article.

🎃 Selecting Appropriate Icon

To start off, you will need a suitable icon(image), with certain dimension. This custom_icon of ours should try and represent what your app does (now there's no rule regarding that, you can use any image you like 😊). But for the dimensions, you should provide a high resolution (say, 1080 x 1080) Portable Network Graphic (PNG) image file, so that when our launcher package runs, it gets to build for all screen sizes. Now you wouldn't want to have a pixelated image as your first 'user-encounter' experience now, would you?.

🎁 Flutter Package

There are so many approach to getting your custom_icon into your project, but for this article, we will be looking at 'flutter_launcher_icons' flutter package.

You can always make reference to the official doc for the Flutter_launcher_icons here. But I'd love to make reference to the few sections we would be needing for this article.

   // paste the below code in your pubspec.yaml file

   dev_dependencies:
      flutter_launcher_icons: "^0.9.2"

   flutter_icons:
      android: "launcher_icon"
      ios: true
      image_path: "assets/icon/icon.png"

NB: Please remember to give the specified number of indentation.
NB: run 'flutter pug get' to get the package.
NB: run flutter pub run flutter_launcher_icons:main , to build the icon.

Once you have successfully finished the above procedures, your icons, (yeah, icons, for various screen sizes) will be placed in your 'android\app\src\main\res' directory\folder.

Close your application process, and run it again, this should incorporate the new launcher icon into the app.

Summary

Finally, our app looks more like ours now, phew!!! 😪😪. There are still native ways to reproduce the launcher icons, but that would require you to get the image for the icon to various device screen sizes. That I know for a fact won't be easy.

Comments

[Keff]

Note that this approach will generate a static icon, but flutter_launcher_icons also allows for adaptative_icons, the ones that adapt to whatever icon shape the user has defined in his device. This will give your app a way more professional look!!

From android docs:
Android 8.0 (API level 26) introduces adaptive launcher icons, which 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.

pub.dev/packages/flutter_launcher_...
developer.android.com/guide/practi...

[George Ikwegbu Chinedu]

Hi Keff,

I don't know if I read your response wrongly, but , I used the 'flutter_launcher_icons' package for this article...

[Keff]

Ohh yeah, I just wanted to show you that you can also create what are called adaptive icons (for android), they're icons that can adapt to the icon shape defined by the launcher, squared, circle, squircle, etc... Just in case you didn't know about them

They're pretty cool, apart from adapting to the shape, they also animate when you press the icon or swipe the page, giving the app a more professional feel.

Take a look at this guide if you want to understand it better