Flutter Change App name & Launcher Icon – 3 Easy Steps

Flutter Change App name & Launcher Icon – 3 Easy Steps

In this article, we will look at 3 simple ways to change the Flutter App name & Launcher Icon for Android & IOS devices easily. Make sure to read the whole article to understand how the entire process works.

Since Flutter is a one code base for both Android and IOS, we will be looking at creating the changes for both the environments. Starting with the Flutter Change App name below.

Flutter Change App Name

In order to change the Flutter’s App Name, make sure to create the app name right when the project is created. The following are the steps to do it.

Create the App

Creating the app is pretty straight forward, for a detailed explanation on it, take a look at the Flutter App for Beginners – Creating your First Flutter App article. However, the following images illustrate how to do it in simple ways.

Input Project Name and Build the Flutter Project

  1. Create the App Project through the Builder

2. Name the PROJECT NAME  as to what your App Name should also be. This reflects your App Name. In this example, I have named it as sample_flutter_app. We will see how it creates the App in the next section.

3. Finish the flow by building the App.

4. Flutter Project is creating

5. Sample App Code is built here

6. Project Structure looks like this.

7. App Name is reflected under Android>src>main>Androidmanifest.xml

The label name in the Android manifest is responsible for giving the App Name for Android Application. This app name is the same name as the project name we gave in Step 2. You can control the App name thus directly when trying to create the project.

In case the App name is not created while building the project. Do not worry, we still have ways to change the App Name

Change App Name for Android

Changing the Android app name is as simple as modifying the Androidmanifest.xml label.

Make sure that the Androidmanifest.xml is selected. It is as simple as choosing the file from the project folder. The below-highlighted file is to be selected.

The Androidmanifest.xml can now be modified. Choose the

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

This portion represents the actual Android file naming system. Important information like Launcher Icon and App name can be controlled here. Modify the android:label  to change the App Name only.

NOTE: android:name represents the id(To more about what this id does, watch about Releasing app in the app store). This id is unique for all the apps that are present in the android app store and we will not be looking at this in this article.

Change App Name for IOS

Modifying the IOS name is as simple as we did for Android.

  1. Navigate to the IOS>Runner>info.plist like highlighted below.

2. Find the CFBundleName <key>. This denotes the Key that holds the app name. The app name now can be changed by modifying the <String> </String> below that.

Once done, make sure to build the application(Run it in the IOS Simulator) to see the change effected.

Flutter Change App Icon

Just as similar as it is to change the App name, it is easy to change the App icon as well. The below sections illustrate the same.

NOTE: Additional tips as to how to create the App Icon is added towards the end. Check it out to faster the process of adding App Icons.

Create the Icon

Creating the Icon should not be a problem. You can use any free tools available to do the same. Make sure that the icon is of 500 x 500 size to make it easily changeable across App sizes.

Change App Icon in Android

Android requires multiple sizes of Icons(This is to effectively show the icons in all devices of varying sizes). There is a super easy tool to do this for us. See the last section to know more about it.

Once the different Icon sizes are obtained, find the Android>app>src>main>res folder as shown below.

Open the folders starting with mipmap. This folder holds the launcher icon for that size under the name ic_launcher.png

Place your Icon in all the folders and make sure to change the name of it ic_launcher.png like shown below.

Once all the icons are replaced, Build and Run the App on the Android Emulator to see the Icon Change.

Changing App Icon For IOS

Changing the IOS App Icon is also pretty straight forward as the above section. To begin with, navigate to the IOS>Runner>Assets.xcassets>AppIcon.appiconset folder. It looks like the structure shown below.

The next step is to replace all the icons(Depending on their sizes) as shown in the file name. 

Icon-App-20×20@1x.png represents a 20×20 png file. It is a really tedious process to go in and change all the Icons by hand and also modify the icons to varying sizes. To ease the process, take a look at the following section.

App Icon Generator

We will see about a free tool called the AppIconMaker which will ease the process by a huge level. Just drag and drop a 500×500 icon or a 1024×1024 png file and the online tool generates these files with varying sizes easily.

Sample Sizes for IOS and Android are shown below. Just Drag and Drop the icon in the uploader section and the icons are generated easily.

AppIcon for IOS
AppIcon for IOS
AppIcon for Android
AppIcon for Android

Flutter Change App Icon & Name – Conclusion

The article detailed all the workings of creating and changing the App name and the App Icon is super easy steps. The easiest of steps is to let the IDE generate the name for you and place it in places (The first section of the article illustrated how to go with the Initial flow for creating the project and the Project name corresponded to the App name). That being the easier of the other two ways, App Icon, on the other hand, has to be modified by the steps illustrated above only.

There could be a single way to build both the App Icons for IOS and Android but nothing yet so far. Make sure to check them all out and drop any comments in the comment section below.

“Happy Coding”

 

Leave a Comment

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