Adding an icon for your App built with Flutter
App Icons are an important part of any app development. They give your app an identity. The more creative and eye-catchy they are, the more attention they grab from your users. Here we discuss quick and easy methods of adding such icons.
First, there is a set of common steps to follow in order to create icons for iOS or Android.
Step 1: The foremost step is to either create or get a ready-to-use icon suitable for your app. Let's assume the icon name is my-app-icon-general.png. This is a general icon and we need to create various versions of it based on platforms and device sizes.
Step 2: Next, we will use an online tool to create various icons based on device sized for our target platforms.
- Go to https://appicon.co/ and select the App Icon Tab. This online tool allows you to select or drag your icon (in this case we assumed it is called my-app-icon-general.png).
- Once my-app-icon-general.png is uploaded, from the right hand panel select the target platforms for which you want to generate icons. Since, here we are discussing mobile app development with iOS and Android, we can just select (or toggle on) the iPhone and Android buttons. Feel free select any combination based on your needs.
- Now, click on the Generate button to create a zip file of icons to your local machine. Feel free to rename the zip file while saving. In my case, the zip is named AppIcons.zip.
Step 3: Now that we have our icons, unzip the AppIcons zip folder. The unzipped folder will have the following folders and files:
 |
| Unzipped AppIcons folder's contents |
As you can see there are folders for android and iOS (which is named Assets.xcassets) plus couple of icons for apple and play stores. We are concerned with the android and Assets.xcassets in our case.
Here is where the paths for Android and iOS icons differ by a little bit. First lets deal with Android app icons.
Step 4 (Android only): Open the path android\app\src\main\res path from File explorer or Finder or any IDE of your choice. Note that the android directory/folder is in the root of your Flutter project at the same level as the lib folder. Here I will open the path in File Explorer in Windows.
- This folder will have various mipmap-* folders based on device size plus drawable and values folders. We are only concerned with the mipmap folders. The appicon tool generate various icons for corresponding to these mipmap folders.
Step 5 (Android only): Open the AppIcons folder and go to android sub-folder. Here you will see a bunch of mipmap folders. Each folder has a specific sized version of your my-app-icon-general.png and looks something like this:
 |
| The android folder of AppIcons folder from appicon.co |
Step 6 (Android only): Copy or cut all the mipmap folders from within AppIcons\android folder and paste them over the android\app\src\main\res folder's contents. We are basically replacing the default flutter app icon that Flutter framework provides us with our own iconsets.
Step 7 (Android only): Start or re-start your app and view your app's icon in your Android device's screen.
All set with Android. Onto iOS app icons. Here are iOS specific steps:
Step 9 (iOS only): Go to the AppIcons folder (the one downloaded and unzipped from appicons.co website). Within AppIcons, find the Assets.xcassets folder. If you drill inside this folder, you will find a AppIcon.appiconset folder which contains a bunch of icon files based on device sizes.
Step 10 (iOS only): Open the path ios\Runner from File explorer or Finder or any IDE of your choice. Note that the ios directory/folder is in the root of your Flutter project at the same level as the lib folder. Here I will open the path in File Explorer in Windows.
- This folder will have one Assets.xcassets folder and similar to the AppIcons structure, you will find a AppIcon.appiconset folder which contains a bunch of default icon files provided by Flutter.
Step 11 (iOS only): Copy or cut all the Assets.xcassets folder from within AppIcons folder and paste them over the ios\Runner folder's contents. We are basically replacing the default flutter app icon that Flutter framework provides us with our own iconsets.
Step 12 (iOS only): Start or re-start your app and view your app's icon in your Android device's screen.
0 comments:
Post a Comment