Automatically Generate Flutter App Icons with flutter_launcher_icons
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
I’ve been working on a Flutter application for the better half of this year, and as we get closer to release, I realized I hadn’t set an app icon yet. I initially went ahead and set my icons with Xcode and Android Studio, but after finding the
flutter_launcher_icons plugin - I’ll never need to do this manually again!
To see how this works yourself, boot up your current Flutter project or follow 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:
# New Flutter project $ flutter create f_icons # Open this up inside of VS Code $ cd f_icons && code .
Adding the Flutter Launcher Icons Plugin
Head over to your
pubspec.yaml and add the following plugin to our
dev_dependencies: flutter_launcher_icons: ^0.7.4
We can then ensure we have the latest packages in our project by running:
$ flutter pub get
Now that we’ve got a Flutter project, we’ll need a logo to set as an icon. Here’s one that we can use, imagine it’s a camera application:
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 Android and iOS using the one specified. We can also configure this deeper by providing an
image_path per platform if we wanted to have a separate icon. Here’s how:
flutter_icons: image_path_ios: 'assets/images/heal.png' image_path_android: 'assets/images/heal.png' android: true ios: true
With this in mind, let’s go ahead and generate the icons!
Run the Build Script
Inside of your terminal, run the following build script:
$ flutter pub run flutter_launcher_icons:main
If everything worked correctly, we should see the following result:
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
Let’s run our application on a device or emulator. We should be able to see our awesome new icon!