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.