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 getStep 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
- https://pub.dev/packages/flutter_launcher_icons
- https://stackoverflow.com/questions/43928702/how-to-change-the-application-launcher-icon-on-flutter