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
Name. We will get into the android directory.
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
- 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
android | ├── app │ ├── build.gradle │ └── src │ ├── debug │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ ├── kotlin │ │ └── res │ └── profile ├── build.gradle
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:labelThis 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.
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
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.