Flutter Tutorial - How to Create Custom App Launcher Icons THE FAST WAY!

hey guys welcome to my youtube channel my name is jaden irwin and today i'm going to be going through how you can make a custom launcher icon on ios and android with a flutter package so really on flutter it just kind of gives you a default app icon and a lot of times when you're making your own app you want to kind of give it your own flair your own style so you can easily with this package you can just create your own custom launcher icon this works for both ios and android and then i am going to go through how you can do a adaptive icon for android because android does give you the option of having different shapes for your icons so we'll go through how you can actually support the adaptive icon spec with flutter so let's go ahead and get started you'll see that i just have my own logo here just kind of a basic signature logo you can definitely use your own icon create your own i'm using figma to do most of my logo design and app work but feel free to use any any ui tool you want to but you'll see here that i have my basic logo and then a background i like to do this 512 by 512. you can really do a larger resolution than that if you want to but this tends to be really the maximum size that you need so i just do 512 by 512 and then all we have here is just my little icon and then below that i have a rectangle that rectangle has a border radius of 24 on the corner radius that what gives it the a little bit of rounded corners there and then down here we're going to get to this later this is how you do the adaptive icon let's go ahead and start with just a basic icon i will have the source code files linked below feel free to look at those you'll see on all my source code i like to do a main you have your your main or your master branch and then you have a starter files branch on there starter files that's where you can actually go you can switch over to the starter files branch and actually start from scratch basically or at least whatever scratch i started with and if you want to follow along you can definitely do that just go to the starter files and go from there it doesn't have the completed code like you'll see inside the main directory or the main branch so i already have that pulled up in visual studio code here and then it's also running in my simulator um it's really just a basic app that i have going it has a little bit of theming this is like a starter that i like to use if you guys want me to publish that starter or talk about it i can but yeah it's just like a basic starter with a home page and right now it's running with the home page open so this is actually pretty easy to do because of this um open package or pub.dev package so if you go to pub.dev for your flutter packages and you search launcher icon there is this flutter launcher icons package and it's obviously very popular it's got quite a few likes on it um but when i looked online there just weren't a lot of videos explaining um how to do this so i figured we might as well go ahead and do it share a little bit of knowledge there so flutter launcher icons here it's got its version number there but if we go to the defaults to readme we'll come back to that we're going to go to install it first so let's go copy this and we're going to go back over to our visual studio and our pubspec.yaml and then i already put a little section here for custom launcher icons we're going to go ahead and paste the package first under google fonts so flutter launcher icons you can put it under your cupertino icons if you want we'll save that visual studio will automatically run i'll go ahead and hide my dock there it'll go ahead and run and pull in that pub spec and then we'll go back to read me and feel free to read through the documentation i find it's really easy to use whoever made this did a great job at writing out some decent documentation which is always appreciated um but what we're going to go through is this flutter underscore icons that's really what we want so we'll go ahead and copy that we already did the dev dependencies which you can put that in your dev dependencies too that's probably a better place to put it so we'll go ahead and paste that there and then flutter icons we copied that and we're going to drop it in here flutter icons colon android launcher icon ios true so we'll go through this but what we first want to do is actually add our icon to our project so if you go up here we're going to go ahead and add a new folder and we'll call it assets and in the assets folder that's where we're going to put the icon so let's go here and remember we already have this icon and you'll want to mess around with this a little bit too for the padding um if you feel like you're not giving enough padding you can definitely make this smaller if you want and i'll show you what i mean once you start running this and it creates the icon for you you might have to play around with it a little bit to get the size that you like let's go ahead and we will highlight this and export this png png is going to be a little bit higher quality than the jpeg so i like to use png export icon and then we're going to click and drag this over to visual studio and assets drop it in it's called icon.png now if we go over here to our flutter icons that we copied you have android ios image path um asset icon icon.png so you'll see if we want to use their path that they already put in we could or we can just go ahead and remove that and now we're using assets icon png okay now give a little bit of space there this android you're saying i want to launch your icon ios you're saying i do want this to work for ios so you're setting that as true then your image path we just went through so assets icon.png now if we want to just run it from here we can so they're telling you run flutterpub get visual studio code does that for us which is nice so really what we need here and what they're saying is that you can create your own config file you don't have to do that necessarily what we're going to do is just run this right here flutter pub run flutter launcher icons which is the name of the package colon main so let's go ahead and go to our terminal which i'll kill our terminal real quick here go to terminal new terminal opens up in our directory and then they said flutter run flutter pub run flutter launcher icons and then colon main enter you'll see this is where kind of the magic happens so it runs this it's a terminal command when you run that command it says successfully generated launcher icons so you'll see in in my get it's already saying hey some files changed here or were added so it it did it for us just like that you have your android manifest it jumps in and it adds in your launcher icon if you want to see what they're doing feel free to look through what files change whenever you run that but it's really just a super helpful plugin that does a lot of the hard work for you so you'll see online a lot of these tutorials walk you through manually how to do this you can do that if you want but i like to work smart and and work hard but i like to work smart first so we're really just using this to to do the hard manual work for us so we'll go in here and what i want to do is actually run this so let's go ahead and kill this i'll go back to my main.dart and let's run this on ios just because i have my simulator already running and it's running should take just a second to run the xcode build i already built it once it shouldn't be too bad and what we should see is that icon update if it doesn't you might have to uninstall the app and rebuild it we'll see what it does here because it really just matters if it's caching the icon but we'll see here running xcode build if this takes too long then i can skip through for you it looks like it might have just finished cool so back at the home folder let's go ahead and go back home look at that custom icon just like that and i'll throw in a little bit of help here too this custom app icon notice that's the name of the flutter project if we go in and we're on ios right now if we go into ios runner and then info.plist you can find this in the flutter documentation too if you want but you'll see that our build what's it called bundle name right here we can change that if we want custom app icon if we don't want the lower casing and then it's not going to update right away because it needs to rebuild the app um but i'll show you here in a bit that that does change too and if you want to do that on android you can go to android app source main and then android manifest.xml you'll see that we should have our label here so application android label that's how you can change it on android so custom app icon there we go so let's kill the app again we can rerun it and it should update the app icon or the app name it already did the icon for us which is really cool um so that's ios but we're going to switch over to android right we want to talk about the adaptive icon um so if we go back over to our figma what i did here is you have your background and your foreground that's kind of how these adaptive icons work basically the reason why they're adaptive is the background is a shape and it can change that shape to like the teardrop where it's just rounded in one corner which i can even show you actually how that happened so we'll do like 12 here maybe a little more so see how it rounds off one of the corners on android there's that option where you can have it be a circle you can have it be just a rounded um rectangle there's a lot of different options there but if we just do what we have here it's not going to be adaptive so we'll close out some of these and it should have already built by now which we probably have to remove the app to get that to work um but yeah really right now it's just going to be an app icon which what we'll do here is i'm going to kill my ios that's really all you need to do for ios which is nice right just go through here to your pub spec android ios true give it the image path and you're done that's how ios will work and it'll look fine on android too i'll show you i'll go to no device i'll start my android emulator let's run this on android it will look fine but if we want to really take it to the next level we want to do adaptive icons we want to have support for the latest android features and that's one of them so this might take a second probably hear my fans spin up on my computer android's emulator is a little bit more demanding i've found all right so what you see here is that on android it just takes your little square icon that we originally used and it's just the square inside that circle kind of not the best look what we really want is the logo to be larger and then the whole background to be black so that's why we want to use adaptive icons so we'll go through how to do that let me go ahead and clean this up just a little bit what we have open and we're going to still use this assets folder but let's go back over to figma and in figma we have our background so let me go ahead and minimize android we have our background and our foreground you might again have to play with your spacing a little bit depending on what your icon looks like and kind of its dimensions if it's tall or it's wide this is just a square but i went 285 pixels wide and tall and that's giving us about 113 114 pixels around that square um play around with that if you want a little bit but let's go ahead we're going to export this background what i called it is adaptive underscore icon underscore background and again png 512 by 512. go ahead and export go back over to vs code assets drop that in just a black square nothing crazy that's our background and then this is our foreground right so same thing png export bring it over drop it into assets now what we want to do is go over to our pub spec and if we go back to our directions here that they're giving us adaptive icons is adaptive underscore icon underscore background and then you can give it the asset if you want or you can just give it a color if you want to go the fast route and just do the color i don't think that was an option when i originally used this direct or this uh um plugin so use that if you want but i'm gonna go this route with a png so adaptive icon background pretty straightforward we're gonna do assets forward slash adaptive i think i just called it the same thing right so dot png and this is the foreground you have to do the same thing again which let's go ahead and just copy it from there colon assets foreground dot png just like that we're all set to go it's gonna run flutter pub get let's go back to our terminal and then what we're gonna do is run that again so flutter pub run flutter launcher icons name of the plugin colon main now that we're giving it options for background and foreground it should just go ahead and create an adaptive icon for us so we'll give it a second i'm going to stop it on android come back to our emulator here and let's go ahead just to be safe we'll uninstall and we'll come back to our main.dart and run that on android perfect we'll give that a second probably still hear the fans in the background hopefully not but we'll just give that a sec and fast forward through if we need to hey not too bad all right go back home here and look at that i'll bring it back to our home screen here we've got the full black background with the logo up front then logo is nice and big and then we'll see if it gives me the option for the shape of the icons i don't think it's going to here on my emulator on a normal phone you definitely can do that yep it's not going to give us the option for adaptive icons here at least less unless i dig into it but yeah on a normal android phone i think it's android 8.0 and up supports this you'd be able to change this to a square you can change it to what they call a squirkle kind of a square in a circle funny name and then the teardrop where it's just rounded in one corner but that is really it if you guys enjoyed this let me know hopefully it was helpful for you definitely leave a comment below if you found it helpful like it if you found it helpful and subscribe for any new flutter tutorials i am going to be coming out with more flutter and web-based tutorials for design and development so have a good one hope you enjoyed it peace [Music] foreign

Channel: Jaydan Urwin

Views: 697

Rating: 5 out of 5

Keywords:

Id: DPJXRufxwFs

Length: 19min 22sec (1162 seconds)

Published: Mon Jan 25 2021