’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_iconsplugin – 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.
Here’s a video about this topic if watching it fits more your style of learning:
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!