Generating App Icons in Flutter

In today’s tutorial we will learn how to generate app icons for both android & ios apps very easily by using a flutter plugin flutter_launcher_icons. To see how this works, open your current Flutter project or create a new one by following along with the demonstration below.

Creating a new Flutter project

As always, we’ll start off by setting up a new project and adding the plugin:

# Create New Flutter project
$ flutter create flutter_app_icons_demo

# Open this up inside of Visual Studio Code, you can use any IDE you want
$ cd flutter_app_icons_demo && code .

Adding the Flutter Launcher Icons Plugin

Now open your pubspec.yaml and add the flutter_launcher_icons following plugin to our dev_dependencies. Currently the latest version is 0.7.4.

dev_dependencies:
  flutter_launcher_icons: ^0.7.4

Then type the following command into the terminal, which will get our plugin and make it available to us to use.

$ flutter pub get

Now Place your icon inside of your assets/images/icon.png folder, or a similar folder of your choosing. Then, inside of pubspec.yaml, we’ll need to provide the flutter_icons configuration option:

flutter_icons:
  image_path: 'assets/images/icon.png'
  android: true
  ios: true

This will generate application icons for both Android and iOS. We can take this to next level by providing an image_path per platform if we wanted to have a separate icon for each platform:

flutter_icons:
  image_path_ios: 'assets/images/icon_ios.png'
  image_path_android: 'assets/images/icon_android.png'
  ios: true
  android: true

Run the Flutter Build Script

After setting up the configuration, now all we need to do is run the package.

$ flutter pub run flutter_launcher_icons:main

If everything went as expected, we should see the following result in the terminal:

Android minSdkVersion = 16
Creating default icons Android
Overwriting the default Android launcher icon with a new icon
Overwriting default iOS launcher icon with new icon

Now run your application on a device or emulator. You should be able to see our new icon. Hurray 🥳

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending