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.
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 .
Head over to your pubspec.yaml
and add the following plugin to our dev_dependencies
:
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!
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!
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up
Great tutorial, really helpfull, thx! Little tip, just run “flutter pub add flutter _ launcher _ icons” in the terminal instead of adding dependencies to the pubspec.yaml file manually. This way the latest version will be added in the pubspec.yaml file automatically. Altough it might end up in the “dependencies” instead of the “dev_dependencies”, so I’d maybe check that. But at least for all flutter-plugins which require adjustments in the “depencies” sector “flutter pub add XY” is a really usefull command :)