Skip to content

[Flutter] Use flutter_launcher_icons Package To Change App Launcher Icon

Last Updated on 2021-10-18 by Clay

When we use Flutter to develop an application, do not forget to add the launcher icon to the App.

Without setting it, you should see the classic Flutter icon:

But if we want to launch an App, it is impossible to use this default icon.

However, if we want to set the launcher icon, we need to create many different size icons, so that we can adapt to different size screens.

This is a very troublesome step.

In fact, we can use flutter_launcher_icons package in Flutter project. The package can configure different size launcher icons and platforms (Android/iOS) in one go.

How to use flutter_launcher_icons

Step 1: Prepare the icon

Since flutter_launcher_icons will automatically adjust the size of the icons, it is recommended to prepare a larger size original icon.


Step 2: Get the package

Edit the pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: 0.9.0

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/YOUR_ICON"


Please be advised that the indentation here. The wrong indentation will cause the subsequent steps to fail. Then use the following command to get the package:

flutter pub get


Step 3: Execute flutter_launcher_icons package

Open the terminal or you can use the built-in terminal of the IDE:

Enter the following command to run flutter_launcher_icons to set the App launcher icon.

flutter pub run flutter_launcher_icons:main -f pubspec.yaml


Output:

  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.9.0)                               
  ════════════════════════════════════════════
  
• Creating default icons Android
• Adding a new Android launcher icon

WARNING: Icons with alpha channel are not allowed in the Apple App Store.
Set "remove_alpha_ios: true" to remove it.

• Overwriting default iOS launcher icon with new icon

✓ Successfully generated launcher icons


Then execute the App again, and you should see the modified App launcher icon on the simulator/test machine. If you don’t see it, disconnect from the program, or delete the App and try to install it again.

References

Read More

Tags:

Leave a Reply