Flutter native splash screen and App icon change - Easy Method

hello guys in this video we will learn how to change app icon and add native split screen so this is our app we will change the app icon and hit flutter native split screen to this app so let's minimize it this is our letter default app icon now let's open the browser and in pub.s search for latest place and it will open this page and here we will open this in a new tip this is for flutter native split screen and now let's search for letter icon launcher and let's open this in a new tip is icon change is our first step let's move it there let's copy this dependency and we will paste this in under the diode dependency scroll down in here paste that package now let's back to that package tape here copy all this and back to this password.tml file and we will add in the same as that of depth dependency now we will change that icon Parts these are the icon for web window and mobile app so first we will add icons so let's copy these icons and open this Visual Studio code and inside that asset directory we have icon directory and paste it there now in asset we will add icon directory now let's change this icon path so we have this icon in the assets forward slash icons forward slash forward slash app icons dot PNG now let's copy the icon path paste it here I will show you how the correct part of the icon now we will terminate this running app so here we will get the dependencies so from the package we will copy this command and we will run it in the terminal so let's copy it and paste it here in the terminal and press enter this command will run and it will take some time to create icon for your app and after some time it would create icon for your app web and window then next we would add flutter Network split screen first we would copy this package and paste it under the dev dependencies so let's copy it and paste it here then we would hit letter net displays make sure you have this kind of orientation to type alternative space here we would add color this would be the background color of split screen I would set it to White so I would add 6 time F then I would add image URL which will be in the center of the display screen Drive assets forward slash icon however slash logo.png then we would set it true for Android or type Android true also for iOS we would type iOS true so after getting all this we would clear the dependencies so in terminal we will type flutter clean and it will delete all the build and clear the dependencies now we will get all these packages again so type floater pop get and wait for it after some time it would get all the packages so after getting all the packages we would run that icon Launcher command again and it will generate icon for our app web and window then we would be active alternator space tape then we will copy this command and back to that project and paste it in the terminal and this will create flutter native split screen for us so wait for it after some time it will create a flatter native split screen photos so let's rerun our rape so after some time our app will run and this split screen would appear which would have a center logo and this is the logo we have added there in a split screen and this will be the icon of our app so our build has completed now we will minimize this and let's stop this now if we check that our app icon will be changed and the new split screen would be added to our app so this is how we can add a flatter native split screen and app icon

Channel: Code Pie

Views: 10,248

Keywords: splash screen, flutter splash screen, flutter splash screen tutorial, splash screen flutter, flutter native splash, native splash screen flutter, native splash screen, flutter splash screen 2022, splash screen 2022, splash screen in flutter 2022, flutter splash screen image, real splash screen, flutter native splash 2022, flutter native splash screen, native splash screen flutter 2022, Flutter native splash screen, App icon change

Id: 11P_3ZNh-4s

Length: 5min 9sec (309 seconds)

Published: Wed Dec 21 2022