App Icon in Flutter

Introduction

In this article, I will tell you how to add App Icon to your App so that it looks pretty.

By default, we get the Flutter logo icon as your App icon but when you build multiple apps then it will be very confusing for you as to which app should I run. Besides that, you have to upload your app to Google Play Store or App Store, you don’t want it to look like Flutter’s default logo, right?

So, how we will create our app icon? First thing first, we will get our app icon image & then we have to go on appicon.co or makeappicon.com and then just drag and drop your image into the placeholder over there and then uncheck those devices which you don’t need and press Generate.

After downloading your files, unzip them. Now, you will see the Android and iOS folders along with Play Store and App Store Icons.

Now, go to Android files & then you will see that there are a bunch of folders in which mdpi is the smallest icon with a dimension of 48x48 pixels. Then, we have hdpi which has a dimension of 72x72 pixels.

Now, we will go to our Assets.xcassets folder & if you have worked with iOS development, you must come across with Assets.xcassets folder & right here, there are a bunch of icons with different dimensions.

Now, all we need to do is go to our editor & see that we have an Android folder and an iOS folder. The Android folder contains all the files for Android App and iOS folder contains all iOS app files.

So, now we will do it for Android first, expand the Android folder then app then src then main then res & here you will see that there are some folders that look pretty much the same that we downloaded. We only need to replace them.

So, now we have all icons which we generated for our project. We are done with the Android side.

Now, expand the iOS folder & then go to the runner folder & here you will see Asset.xcasset folder. Open it, and simply replace it with downloaded icons.

We are finally done with all things. Now, when we run our app, we can have our app icon.

NOTE: If you face “:app:processDebugResources” error, then simply go to Android > app > src > main > res > AndroidManifest.xml & replace android: icon = “@mipmap/ic_launcher” with your app icon file name like android: icon = “@mipmap/jbtronic” & then save the file & re-run it.

YouTube Video

Complete Flutter Tutorial

You can see my complete Flutter Tutorial Series on my Website: https://www.youtube.com/watch?v=EdJwOGoMgAY&list=PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a