How to Change Application Name and Launcher Icon in Flutter

Icons on mobile launchers

Today, I’ll tell you how you can change the default application name and launcher icon in 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.

Step 1: Changing the App Launcher Name

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 AndroidManifest.xml and Info.plist respectively.

For Android

Inside, find <application>and change its android:label property with your desired app name.

android/app/src/main/AndroidManifest.xml

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="your_app_name"
        android:icon="@mipmap/ic_launcher">

iOS

ios/Runner/Info.plist

<key>CFBundleName</key>
<string>your_app_name</string>

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!!

Step 2: Change App Launcher Icon

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.

pubspec.yaml

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.

Additional Step: Change the app icon manually

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

Go to 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.

iOS

The icon config files are located inside ios/Runner/Assets.xcassets/AppIcon.appiconset. The Contents.jsonfile 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 strange, give me few claps before leaving. Cheers! 😉✌

-HARIHAREN S.S