Adding app icons to our Flutter project is very simple thanks to the the flutter_launcher_icons plugin. Using this, all the different shape/size icons for iOS and Android will be generated automatically. Similarly, flutter_native_splash library takes care of the splash screen so that we avoid the blank view that appears for a few moments when starting up.
Step 1
The Icon Images
For iOS:
We need to specify just one image for the iOS platform. Create a PNG file (no alpha / no transparency) with 1024×1024 dimension. Let us name this app_icon.png and put it in a folder named images in our flutter project root directory.
For Android:
Android has adaptive launcher icons, so we will specify an image (or a color) for the background and an image for the foreground of the icon. For this example I will use a color for the background. So just make a PNG image file of your icon with transparent background. Let us save this as app_icon_foreground.png in the images folder.
Fallback icon:
For old android devices which do not support adaptive icons, you can create a third icon image, same as the iOS icon but with rounded corners and transparency, for good effect. In this example I will use the iOS icon itself as the fallback icon. You can do the same.
Step 2
Add the plugins
Open your pubspec.yaml and add the following plugin to dev_dependencies:
dev_dependencies: flutter_launcher_icons: ^0.7.4 flutter_native_splash: ^0.1.9
Run the command
$ flutter pub get
Step 3
Add configuration for icons
In pubspec.yaml, we’ll need to provide the flutter_icons configuration.
We will set the ios icon in image_path_ios, the adaptive icon background and foreground in adaptive_icon_background and adaptive_icon_foreground respectively. And the fallback icon in image_path_android. The boolean values for ios and android properties tells the flutter application whether or not to generate icons for the given platform.
flutter_icons: ios: true android: true image_path_ios: "images/app_icon.png" image_path_android: "images/app_icon.png" adaptive_icon_background: "#ffffff" # or image adaptive_icon_foreground: "images/app_icon_foreground.png"
Add configuration for splash screen
Similarly, we set the attributes for the splash
flutter_native_splash: image: images/logo.png color: "#ffffff"
Step 4
Generate icons
Now run the following two commands to generate the icons.
flutter packages get flutter packages pub run flutter_launcher_icons:main
Generate Splash
flutter pub pub run flutter_native_splash:create
You’re done! Run the app and you should see the new app icon for your app, and the splash screen.
…
Leave A Comment