Flutter the easiest way to make app icons




refer to


Let's admit this-managing application icons is a repetitive task. They must be generated in multiple resolutions and placed manually in several folders, which is a secular task to take. You may need to make some small changes or modifications, and now you have to repeat the entire process of replacing the icon.

Not only that, but depending on the version of the platform or operating system we choose, different rules apply. So keep these in mind, this process is best to be automated rather than manual. We will use this flutter package named "flutter_launcher_icons" here to automatically generate all required resolutions.

Flutter Launcher Icons:

A command line tool that simplifies the task of updating application startup icons. Fully flexible, allowing you to choose the platform on which you want to update the launcher icon, and if you want, choose to keep your old launcher icon in case you want to return at some point in the future.


In any case, when exporting from a graphics editor, it should be:

  • Format: 32-bit Format: 32-bit PNG Papua New Guinea
  • Icon size must be up to 1024x1024 pixels must be up to
  • Make sure it is visible at 40 pixels (this is the smallest icon) (Apple Requirement)
  • Maximum size 1024KB (Android Requirement) 1024KB (Android Requirement)
  • The icon must use no transparency
  • The shape must be square no rounded corners
  • Need an adaptive android icon background and foreground to be separated

Android product icon keywords

The intended look might be different from the guidelines provided by the platforms. So we’ll be creating 3 different flavors for android, iOS, adaptive icons.

The expected appearance may differ from the guidelines provided by the platform. Therefore, we will create three different styles for android, iOS and adaptive icons.

Expected appearance

Android and iOS (no transparency) Android and iOS (no transparency)

Adaptive Icons for Android 8.0 and above

implementation plan:

We will use a package called flutter_launcher_icons

Now we need to implement it in your code separately:

  • Step 1: Add dependencies.
Add dependency to the pubspec.yaml file located in the root directory of the Flutter project:
  flutter_launcher_icons: any
  • Step 2: Configure properties
  ios: true
  android: true
  image_path_ios: "assets/launcher/icon.png"
  image_path_android: "assets/launcher/icon.png"
  adaptive_icon_background: "assets/launcher/background.png"
  adaptive_icon_foreground: "assets/launcher/foreground.png"

The image is in your assets/launcher/

  • Step 3: Run the package
After setting up the configuration, all that is left is to run the package.
flutter pub get
flutter pub run flutter_launcher_icons:main
  • Step 4: running

If all goes well, the assets have been generated. Now you are ready to build the application and run it. congratulations


Currently, it can only be used to assign icons to android/ios
  • image_path Image path :: The location of the icon image file, you want to use it as the application startup icon
  • image_path_android picture/path/android :: The location of the icon image file specific to the Android platform
  • image_path_ios picture/path/ios :: Icon image file location specific to the iOS platform
The next two attributes are only used when generating the Android launcher icon
  • adaptive_icon_background background : You can pass in a solid color (Eg “#ffffff”) or image asset (Eg “assets/images/christmas-background.png”) which will be used to fill out the background of the adaptive icon.
  • adaptive_icon_foreground adaptive icon prospects : Which by Will at The Image Asset Used for BE at The icon of foreground at The Adaptive icon: image assets prospects for the adaptive icon icon

Thank you\!


© Cat brother


Open source

GetX Quick Start


News client


strapi manual translation


WeChat discussion group ducafecat

Series collection



Open source project


Dart programming language basics


Getting started with Flutter zero foundation


Flutter actual combat from scratch news client


Flutter component development


Flutter Bloc


Flutter Getx4


Docker Yapi


阅读 455

前端全栈 nodejs vue react ssr 同构 pm2 webpack linux 一发不可收拾~

全栈开发者 最近专注于 Flutter/Golang/Nodejs/K8s/CICD/基于Docker前端基础建设 , 喜欢技术分享

595 声望
102 粉丝
0 条评论

全栈开发者 最近专注于 Flutter/Golang/Nodejs/K8s/CICD/基于Docker前端基础建设 , 喜欢技术分享

595 声望
102 粉丝