Set App Icons in Flutter

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.

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 plugin

Open your pubspec.yaml and add the following plugin to dev_dependencies:

dev_dependencies:
  flutter_launcher_icons: ^0.7.4

Run the command

$ flutter pub get

Step 3

Add images

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"

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

You’re done! Run the app and you should see the new app icon for your app.


Also published on Medium.

By |2020-05-10T20:10:38+00:00May 10th, 2020|Categories: Flutter|Tags: |0 Comments

Leave A Comment