Sunday, April 22, 2018

Motivational Quote App: How to change app icon in Flutter Ep. 9 Pt. 5



In this blog post I am going to show you, how to change default Flutter app icon to your own app icon. You can create your own icon using Android Assets Studio , as shown in the video.

If you have created your app icon in that website you will get a zip file with various resolution of your icon. Unzip it to a folder or you can find your Flutter project in your file system and go to android > src > main > res  there you will see mipmap folders and delete those and paste your mipmap folders there. But I am gonna do it in IDE. So copy all the unzip mipmap folders and in the IDE project root directory, expand the android > src > main > res and there you will see mipmap folders delete all of these and paste yours to that res directory. As shown in the image below:



So, if you did not create your android app icon there. And if you create using another software or photoshop you have to paste your icon to existing mipmap folders instead of deleting those.

However, keep remember to name or rename your app icon without space, if you want to separate words, use underscore. As a example motivational_app.png

Now, after added your icon, open up the AndroidManifest.xml file located at your_flutter_project > android > app > src > main > res 

Next, find the application tag and there should be android:label= and android:icon=

label is the one you see below the app icon. I have change it for my app: android:label="motiv"

and for the icon add your icon name. Make sure to add only name without file extension(.png or any).
For our motivational quote app: android:icon="@mipmap/motivational_app"

Also there is a package in pub that you can use to generate app icon for both android and IOS. You can check that out here: https://pub.dartlang.org/packages/flutter_launcher_icons

Download motiv icon.

Still we are not finish with our motivational quote app. You can download the project that we use so far using below link.

Download the motivational quote app project so far.

In the next video I am gonna explain how to structure our project and code(this is the most important part when we develop a app as a good developer). So, I will also explain how to add model class for our quotes and how to add list of quotes in next blog post. And I will show how to do it in a video also. So stay tuned with SL Coder - Ego with Coding. Leave a comment down below.

Thanks for reading!

1 comment:

  1. THANK you , I hope this coding would be helpful for my app
    https://healthbasictips.blogspot.in/

    ReplyDelete