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-structureflutter_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: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.
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.
Tweet this article