Flutter Change App Icon and App Name | Android & iOS

hi everybody in today's video I'm going to be showing you how you can change your apps icon as well as display name for IOS and Android and the concepts that will cover in this video apply to desktop applications that you're developing with flutter as well all you need is the icon image that you want to use for your app and that's pretty much it so let's get into the video so to get started the first thing that we're going to be doing is heading on over to pub. deev and then from there you're going to be navigating to the flutter launchers icon package I'm going to leave a link to the source code as well as all of the resource that we use in this tutorial T in the description below so feel free to take a look at them what you're going to be doing here is just copying this dependency coming back and then you're going to come to your pups. yaml file and here all we have to do is come down to the dependency section and then paste the dependency for flut launcher icons under the dev dependencies here like so once this is done you're do to command save and you're going to stop running your application and this is basically going to install the flutter launcher icons package into our project which is going to allow us to override these icons for iOS Androids as well as Mac OS and windows once this is done we have to define a specific section within our pope.l file which defines how our icons are going to be generated and where are we going to reference our icon image from so to do that what I'm going to do is that I'm going to go to the very end of my pubs spec. yaml file and here I'm going to add a section for flutter uncore launcher uncore icons like so and then after after this the next thing that I'll do is that I'll indent the next line and then I'll add Android and for Android I'm going to basically add the option for a string and I'm going to save this to be launcher icon just copy the same setting no need to change these then for iOS what you're going to be doing is setting this to app icon these settings can be actually found on pub. deev on flutter launcher icons package Page by going down and actually taking a look at them here here the value for iOS set to true however I've noticed that the the actual value for iOS needs to be set to app icon in order for the apps to be generated properly and then referen by ax code so set the iOS property to be a string which is app icon and then we can move on to the next step the next step is going to be to define the image path which is basically going to be the path where we are going to be storing our actual icon image so for this what I'll do is that I'll say assets SL and then from there I'm going to do icon SL ion. PNG and do command save after this what I'll do is that I'm going to reveal this folder and finder and I'm going to be basically within this flutter project copying over my assets folder so just give me a second to do that so I'll just copy over this assets folder and bring it into this folder and what's basically going to happen is now we're going to be having an assets folder within our flutter project and this assets folder is going to have a folder called icons within which we are going to have our icon.png if you're looking for a website where you can easily make app icons then I highly recommend you take a look at easa ion.com this is the website that also gave me this app icon that I'm showing you within this tutorial so once this is done what we can do is move on to the next step which is to actually Define some more options which are going to be what our minimum SDK for Android is going to be so for that I'll do minimum SDK Android and I'll set this to 21 make sure that this is equal to whatever minimum SDK Target you set in your Android manifest.xml file and after this the last thing that I'll do is that I'll set the remove Alpha iOS property here to be true and with this done do command save so the remove Alpha iOS property is just going to remove the alpha channel from your icon image in the case that it has some transparent pixels in it because if you do not remove them then I believe that when your app goes for review it gets rejected because of the app store's policy and this is for Apple so once this is done we're pretty much done with everything and now what we can do is actually just fix the indexs like so so make sure that the flutter launcher icons is not indented and do command save and then flutter pubg is going to run automatically it's going to get the dependencies for us and hopefully you shouldn't get any error with this done what I'm going to be doing now is that I'm going to be opening up a new terminal instance and within the terminal instance before I actually run the command I'm just going to quickly run my actual project so now that my project is actually running if I minimize it you can actually see on Android that my application is shown like this in the actual AB drawer and here you can see that our icon is the default icon for the flutter application as well as the so we're going to be taking a look at how to change this for Android first so to get started the first thing that I'm going to do is run a command and this applies to both IOS and Android as well as any other platforms that you define within the pope.l file for generating the icons 4 and all you can do is paste in this command which is going to be flutter pub run and then from here you're going to do flutter uncore launcher and then underscore icons like so press enter and this is going to go ahead run the flutter launcher icons package and generate the icons for you so with this done I'm going to stop running my application and I'll rerun it this time and you're going to see that it's going to go ahead and generate the icons from the actual image that we've provided to it and then replace them for both IOS and Android as well as any other platforms that we've defined within our pope.l file so now if I minimize my app you're going to see that our actual app icon has been changed changed and now we can see that the app icon is no longer what it was before which was the default FL icon and it's actually the correct one which we are using so now that this is done and we've changed the app icon let's talk about how we can change the actual display name here so to change the display name for Android you can go to Android app Source Main and then the Android manifest.xml file and here for the Android label you can actually set it to be whatever you want the name to be in this case I'll set the name for my app to be noted to command save and after this you can stop running your application and then rerun it again to completely stop debugging it and rerun it and now that you can see my application is running again if I minimize it go to the app drawer you can see that the name for my application has been changed to not so now that this is done I'm going to close down the Android simulator and I'm quickly going to spin up an actual iOS simulator so we can actually take a look at how we can do this for IOS as well so with the command that we run which was flutter pub run flutter launcher icons the icons should already be replaced for IOS as well and to confirm this I'm going to just run this application on a iOS simulator as well welcome back everybody so now that the application is running on my iOS simulator you can see that if I minimize the application that we can actually see the icon for the flutter ha has now changed and the only thing that we need to do is change the app icon so to change this what you're going to be doing for iOS is go to the iOS folder then the runner folder and then open the info. pist file and here here you're going to be changing the name for the CF bundle display name property so the string here you can change this to be whatever you want the name for your app to be and that is what's going to be displayed on screen underneath the icon for your app so here I'm going to do notate again like so do command save after this I'll stop running my application I'll rerun it this time again and hopefully this time once the application gets rebuild and then deploy it onto my iOS Simulator the name for the application should be updated so now that the application is running I'll actually just minimize the application and as you can see the name has been updated to not it now and that's pretty much it so one final note that I'd like to share with you guys is that if you're wondering how you can do the same functionality for Windows or Mac OS in the case that you're developing a ttop application then the documentation for that is also available on the flutter launcher icons page on pub. deev so you can come down to the first step which is set up the config file and here is where you can see how to set up the config for Windows and Mac OS and then you run the same command as we did before which is flutter Pub R and flutter launcher icons and it will basically do it for all of the platforms that were listed under the config file so with that I hope that you enjoyed the video and that you learned something from it as always if you enjoyed the video then please leave a thumbs up on my video And subscribe to my channel so that you get notified every time I release a new video and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye that

Channel: Hussain Mustafa

Views: 5,204

Keywords: app icon flutter, app icon flutter android, app icon flutter ios, change ios app icon flutter, change android app icon flutter, flutter change app icon, flutter change app name, flutter change app icon ios, flutter change app icon android, flutter change app name and icon, app name change flutter, app icon change flutter, android app icon change, ios app icon change, flutter launcher icon change, flutter launcher icon, change app name flutter, change app icon in flutter

Id: QPVMaedX1W8

Length: 8min 44sec (524 seconds)

Published: Fri Oct 06 2023