Changing App Icon with flutter_launcher_icons Plugin

Installing app icon in Flutter is much easier than in Android and iOS taken separately. With a plugin called flutter_launcher_icons you install the same icons in dozens formats in one turn. First install the plugin under dependancies in pubspec.yaml file:

flutter_launcher_icon
Install flutter_launcher_icon plugin in pubspec.yaml

Then add the second part:

dev_dependancies_launcher_icons_plugin
Install second part of flutter launcher icons plugin under dev_dependacies

In image_path you put the address of the icon that you want to become app icon. In this case, it is called iTunesArtwork@2X.png. (That’s a typical iOS name for app icons, btw.)

This is how it looks in Android Studio project pane:

icons_in_fluuter_and_ios
Position of icons in Flutter project and ios directory

In folder icons I put four png files that the graphics designer of the app gave me. You can also see position of Appicon.appiconset folder in ios folder of Flutter project. It contains various images of basic icon app, which the plugin produced automatically.

Now comes the best part: install that icon as app icon by going to terminal in Android Studio and execute the following command:

flutter pub pub run flutter_launcher_icons:main

It is always the same so I put it into comments and copied from there to the terminal window. This is what happens when the command is executed:

launch_app_icons_change.png
All icons for ios and Android will be changed in one swoop

Now we can transition to Xcode by right click on folder ios in the project window and we see this:

from_flutter_to_xcode.png
How to go to Xcode from Flutter Android Studio

Click on further and see what the icons look like in Xcode:

xcode_appicon_assets.png
What the icons look like in native Xcode view

If you are just starting out with Flutter, come again to this blog, it is all about Flutter.

If you have problems developing your app, I can help. Let me know here.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.