Hey there! 👋👋
Today, I’ll teach you how you can change the default application name and launcher icon for a Flutter Application. Sometimes we create an application and give it a random name, but sooner or later, we realized that we need to change the name of the application. The same thing happens for the launcher icon also. Flutter has set its own default icon as a launcher icon when we create an application. So I’ve written this blog that will guide you step by step that how you can change the name and icon of a Flutter application. This article will guide you for both the platforms: Android and iOS.
By default, when a flutter app gets installed, the app name on the launcher is your Flutter project name. To change that to your desired application name on Android or iOS both, you need to change
<application> and change its
android:label property with your desired app name.
<application android:name="io.flutter.app.FlutterApplication" android:label="your_app_name" android:icon="@mipmap/ic_launcher">
That's it. By having these changes, we'll get an updated application name in the launcher when our app gets installed on a device.
So, We are done with the application name here!!
In step 1, we change the application name to our desired one and now it’s time for the application icon.
As Android developers, we know we’ve to put the app icon in the res folder. Additionally, we’ve to put the app icon in different sizes and that will be a headache we guess. Don’t worry!! we have a library for changing the app launcher icon in the Flutter.
Obviously, to do so at least we need a single icon. So take a high-resolution icon (possibly 1024x1024) of your application and generate a launcher icon using follow:
In Flutter, there is a dependency for the launcher icon which is published by fluttercommunity.dev
Please check the link for dependency to get more details. You can find how to integrate that library into a project by going to that link and move to the installation section.
Dependency: Flutter Launcher Icons
For those who’re still reading further, let me guide you all here, how to integrate this dependency in the project.
Step 1: Add this line in pubspec.yaml. Make sure you put your launcher icon in the proper assets folder and give a path to image_path attribute.
dev_dependencies: flutter_launcher_icons: "latest version" flutter_icons: android: true ios: true image_path: "assets/icon/icon.png"
For more attributes please check on the pub.dev link provided above.
Step 2: Run the package by the following command.
flutter pub get flutter pub run flutter_launcher_icons:main
That’s It. We are done here updating the app launcher icon. When this process gets finished and the app gets installed we’ll get to see the updated app icon in the launcher.
If the command from the package above didn’t work for us or maybe we need more customization, we can also set the launcher icon manually.
android/app/src/main/res folder, where we will get to see some folders beginning with
mipmap-* which represent different pixel densities. Replace the
launcher_icon.png file in each folder to use custom icons.
The icon config files are located inside
Contents.js onfile defines a list of icon images with different sizes and scales. The files are located in the same folder. Before updating our application icon to our desired one, It's recommended to follow the guideline for designing the iOS icon. This will simply remove some headaches of releasing our application.
That’s it all for this article. I wish to share more articles in the future.
If you find any difficulties while understanding this article or you have any doubts. Let me know by posting your questions and give me a chance to help you out. If you like it then don’t be a stranger, give me few likes & you can also buy me a coffee before leaving. Cheers! 😉✌
Thanks!. Catch Y'all Soon
(Originally posted on Medium.com - Link )