Flutter the easiest way to make app icons

original

https://medium.com/@bharadwaj.palakurthy/the-easiest-way-to-make-app-icons-in-flutter-9fe1bc9dd646

refer to

• https://pub.flutter-io.cn/packages/flutter_launcher_icons

text

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.

prerequisites

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:

dev_dependencies:
  flutter_launcher_icons: any

• Step 2: Configure properties

flutter_icons:
  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

Attributes:

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\!

thanks

---

© Cat brother

• https://ducafecat.tech/
• https://github.com/ducafecat
• WeChat group ducafecat
• b Station https://space.bilibili.com/404904528

Past

Open source

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

News client

https://github.com/ducafecat/flutter_learn_news

strapi manual translation

https://getstrapi.cn

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578