The Appstore is being crowded with new apps day by day and is no less than a battleground to capture the user’s attention. The app icon is the first element of an app that a user sees. Thus app developers need to create icons that need to stand out.
In Flutter, by default, you will get a Flutter icon as the app launcher icon. In this tutorial, we will learn how to create and add a custom app launcher icon in Flutter.
Prepare the icon
For the launcher icons, you must create two png files. One file is for default use in iOS and Android, and the other one for the adaptive icon in Android. Adaptive icons were introduced from Android Oreo and will be shown in different shapes and sizes across devices by Android.
The use of an adaptive icon is required, as the default icon gets cropped off in some Android devices that show the launcher icon in a circular shape. The adaptive icon requires more margin of space around the image than the default icon.
Add icons
The first step is to add the icons to the assets folder shown in the image above and make it available by configuring pubspec.yaml.
Configuration
- The complete pubspec.yaml file shown above has
flutter_launcher_icons: ^0.8.0added under dependencies. - flutter_icons is configured with android, ios, image_path, adaptive_icon_background and adaptive_icon_foregound.
- Run
flutter pub getto install flutter_launcher_icons
Here we have used the image_path attribute to initialize the location of the default icon image. You can also define different icons for iOS and Android using image_path_android and image_path_ios. The adaptive_icon_background describes the background color of the icon when used as an adaptive icon by Android.
Execute the command
flutter pub run flutter_launcher_icons:main
Run the above command in the terminal. Stop the app if it is running and relaunch to see the new launcher icon in action.