Flutter: Update name and Icon

People face problem in updating Icon and Name while developing flutter app. It’s not very much difficult, in fact it’s quite simple and straight forward.

Android Native developer or iOS Native developer already knows it. Native developers knows the developer tool chain.

To change the name and icon of app, We first need to see file structure. We will make changes to to some internal files(Android/iOS),

File Structure

Flutter file structure looks something like this and to change the Icon and Name. We will get into the android directory.

flutter-app-structure 
flutter_app
    |
    ├── README.md
    ├── android
    ├── flutter_demo.iml
    ├── ios
    ├── lib
    ├── pubspec.lock
    ├── pubspec.yaml
    └── test

Update Name

We will go to the AndroidManifest.xml file and make some changes to the file. This change will update the name of our application.

Path to AndroidManifest.xml file

This is the path to find the AndroidManifest.xml file. There is a visual path also which will tell you the location of AndroidManifest.xml file.

  • Inside you flutter app, go to android directory
  • inside the android directory, you will find app
  • inside the app directory, you will find src
  • inside the src directory, you will find main
  • inside the main directory, you will find AndroidManifest.xml

flutter_app > android > app > src > main > AndroidManifest.xml

flutter-app-structure 
 android
    |
    ├── app
    │   ├── build.gradle
    │   └── src
    │       ├── debug
    │       ├── main
    │       │   ├── AndroidManifest.xml
    │       │   ├── java
    │       │   ├── kotlin
    │       │   └── res
    │       └── profile
    ├── build.gradle

AndroidManifest.xml

The AndroidManifest.xml file looks something similar to this.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_demo">
    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_demo"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <!-- Displays an Android View that continues showing the launch screen
                 Drawable until Flutter paints its first frame, then this splash
                 screen fades out. A splash screen is useful to avoid any visual
                 gap between the end of Android's launch screen and the painting of
                 Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

We need to make some minor change to this and that will update our app name. Remember this is for updating the name only. We will update the icon in next step.

  • android:label This is the name of your app.

Let’s change the name of the app by replacing then value of the android:label to some new value.

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

update code

So, I changed the name of app to My Awesome App and Now, we want to change the icon of the app.

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

Update Icon

To update the icon of the app we will replace the default icon image with our own icon image.

Creating Icon

Creating Icon could be pain when you are learning development. There are various tools which helps us in generating Icons for our app.

I prefer Launcher Icon Generator by Roman Nurik. It’s simple and straight forward and highly recommend you all to try this. If you like it don’t forget to say Thank you to the developer.

Play with the Launcher Icon Generator generator for while you will understand how it works. Once you are ready with the icon you will find a download button in the right top corner.

You will get a zip folder and as soon as you unzip it you will find 5 folders. You might wonder why 5 folder is there but there is logic behind that. Android uses different Icons for different phone.

Inside all the folder you will find same icon but each icon has different resolution. All the image file name will the ic_launcher.png. by default launcher icon of android is named as ic_launcher. It’s time to delete the old launcher icon and add newly downloaded icon.

res directory

We will go the res directory which contains the android app icons.

flutter_app > android > app > src > main > res

   res 
    |
    ├── drawable
    │   └── launch_background.xml
    ├── mipmap-hdpi
    │   └── ic_launcher.png
    ├── mipmap-mdpi
    │   └── ic_launcher.png
    ├── mipmap-xhdpi
    │   └── ic_launcher.png
    ├── mipmap-xxhdpi
    │   └── ic_launcher.png
    ├── mipmap-xxxhdpi
    │   └── ic_launcher.png
    └── values
        └── styles.xml

Conclusion

I know this might be painful to you because it’s not very simple but it’s also not that complicated. As flutter developer I think it’s bit harder to go deep into the directory and update the file.

But at the end we are able to update the name and icon of our and we are happy. This was the end goal of the article and we archived that.