Introduction
Today I'll explain how to change a Flutter application's launcher icon and default application name. Sometimes when we establish an application, we give it a name at random, but sooner or later we realize that the name of the application needs to be changed. The launcher icon experiences the same issue. When we create an application, Flutter automatically sets its own default icon as the launcher icon. As a result, I've created this tutorial that will walk you through the process of changing a Flutter application's name and icon step by step. You can use this article as guidance for both Android and iOS.
The original source of this article can be found here.
step 1: Changing the App Launcher Name
The name of your Flutter project appears as the app name by default when a flutter app is installed on a device. You must modify the AndroidManifest.xml and Info.plist files respectively to update that to your preferred application name on both iOS and Android.
Android:
Inside your AndroidManifest.xml file located on this path android/app/src/main/AndroidManifest.xml, find the tag and change the android:label property to your desired name. preview available below:
iOS:
Inside your Info.plist file located on this path ios/Runner/Info.plist, find the tag that says CFBundleDisplayName or CFBundleName then change the tag value below it that contains your project name to your new desired app name. preview available below:
With these modifications, when our program gets installed on a device, the launcher name we specified above will get displayed as the application name. So, We are done with the application name here!!
Step 2: Changing The App Launcher Icon
As Android developers, we are aware that the app icon must be placed in the res folder. Additionally, we must make the app symbol in various sizes, which will probably be difficult. Not to worry! In Flutter, we have a library for customizing the app launcher icon.
Of course, we need at least one icon to accomplish this. As a result, create a launcher icon for your program using the following method utilizing a high-resolution icon (perhaps 1024x1024):
Android: https://romannurik.github.io/AndroidAssetStudio/
IOS: https://makeappicon.com/
In flutter, there is a package you can use to automatically change your flutter project launcher icon, all you need to do is to use this package and to have your icon or image ready. To learn how to add a flutter package to your flutter project you can simply click here to get more info. Also, don't forget to check out the package guide on how to archive your result.
I didn't bother to explain how to use this package that will do it for you automatically because their guide already has enough info on how to accomplish this, so do check it out to get more understanding of it.
Additional Step: Changing the app icon manually
We can also manually set the launcher icon if the command from the package mentioned above didn't work for us or perhaps we need additional customization.
Android:
The directories beginning with mipmap-*, which stand for various pixel densities, can be found in the android/app/src/main/res folder. To utilize custom icons, replace the launcher icon.png file in each folder.
iOS:
In the folder ios/Runner/Assets.xcassets/AppIcon.appiconset, you may find the icon configuration files. An assortment of icon pictures in various sizes and scales are defined in the Contents.json file. The files are kept together in one folder. It is advised to adhere to the iOS icon design guidelines before upgrading our application's icon to the desired one. Simply put, this will ease some of the releases of our application's headaches.
Conclusion
That’s it all for this article, If you experience any problems or difficulties reading this article or if you have any questions. By sharing your inquiries, please give me a chance to assist you. Don't forget to share this article and also comment on how easy or hard it was for you before you leave if you like it, don't be strange.
Top comments (0)