Flutter Custom Splash Screen Tutorial | Flutter Native Splash Screen Guide

in today's video I'm going to be showing you guys how to create custom spash screens for flutter application by the end of this tutorial you'll be able to understand how to create a custom spash screen like the one being displayed on screen then actually move into your application so to get started the first thing that I'm going to be showing you guys are all of the packages that we're going to be using while developing this functionality the only package that we require is the flutter native Splash package and what this is going to allow us to do is Define some information within our yaml file which this plug-in is going to use in order to generate the specific setting and files that are required for IOS and Android respectively to show the specific splash screen so by using this plugin it's going to make our development life a whole lot easier by doing all of the heavy lifting for us so I'll copy this dependency I'll come back and I will come back to my pspec yaml file and actually paste it in here and as a side note I just want to quickly let you guys know the links to all of the resources that I use within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so I'm going to let Flor pup gets do its magic and while that is happening I just want to let you guys know that now that we've actually imported the dependency what we have to do is actually Define a specific section within our yaml file in order to tell this dependency how it's going to function so to do that you can come back to the actual pub. Dev page for flutter native Splash and you come all the way down to step number one which says that we need to set the flutter native Splash settings within our yaml file so you can either create a new yaml file which you place this stuff in to or you can use the existing pspec ml file and place everything in there so what I'm going to be doing is doing the letter option so I will copy this uh by using this clipboard icon here and copy all of the code I am going to come back come back to ppsp daml I'm going to go to the bottom of this and I'm going to be pasting this in here once that is done the next thing that I am going to be now doing is actually going to the very top and then making sure that there is no intent for the flutter native Splash so as you can see there are no indents for flutter native Splash it's at the start of the line so just do that command save and that's pretty much all we had to do so now that this is done what I'm going to be doing is giving a quick test run to my application to show you guys what the current default functionality is welcome back everybody so now that the actual application is running on my Simulator the next thing that I'm going to be doing is actually stopping running it and I will start running it again to actually show you what the default splash screen looks like so currently when we have not changed anything this is what the default splash screen looks like it's just a white background with the flutter icon within it so now we're going to be changing it so to change it firstly we're going to be taking a look at how we are going to be doing it for all platforms and then what settings we need to tweak for Android 12 specifically so before we can get started the first thing that I'll do is I will create a new folder and I'm going to call this assets and this is where I'm going to be placing the image file for actually the image that I want to show on the splash screen so once this is done I'm going to create a new folder under here which I'll call images and after that I'm going to create a new folder under that called splash and then I am going to be basically opening this in finder or if you're using File Explorer on Windows and from here what I'm going to do is basically drag and drop the actual file in which I require so I'm going to quickly copy that file in just give me a second and this is the file that I'm using this is the logo for the cash app app so I'm just using that I'll copy and paste that in here so now we have under our assets images Splash folder a logo. pnt file that we have to display or we're going to be displaying on our splash screen so once this is done the next thing that we're going to be doing is coming to ppsp spec. yaml and I am firstly going to go to the section where we have flutter and then underneath the flutter there's going to be a specific section that says assets so let me find that there it is I'm going to uncomment the assets line and then the next line after that making sure that the indentation levels are correct and then here I'm going to say that flutter you need to make sure that the assets that are under the images folder are made available to us so once this is done that's pretty much all we have to do so now anything anything that's under asset images is going to be made available to my application to use once this is done now we can come to the specifics of actually configuring our flutter splash screen so the first thing that we're going to be doing is actually taking a look at how to change the color so to change the color of our splash screen we can use the color property that's defined here and the color property that I am going to be using is going to be for a green color so I'll copy that hex code and actually paste it in so you can paste in any hex code here for any color the one that I'm pasting here is going to be for a greenish color so once we've done this what we've basically done is now updated our actual configuration Flor splash screen so what now we need to do is actually take these changes and then generate the specific setting so for all of the different platforms that our actual app is going to be deployed to so to do that what we're going to be doing is actually using the following command which I'm going to be showing you it's called here start run flutter native Splash create so I'll copy this this command come back and then actually come to the terminal and paste it in and if I press enter you're going to see that it starts building the package and it tells me here you go it's gone ahead and it's created all of these different settings and files for all of these different platforms and now our splash screen should be updated so if I start running my application and I start running it again and as you can see nothing changed so let's actually discuss why this happened and I specifically did to actually show you guys what the issue here is so if I was testing this on an iOS simulator then this should have worked but specifically after Android 12 some things changed in the way that Android 12 handles the splash screen so due to that now this plug-in actually defines a separate section for any devices that are going to have Android 12 or above installed on them and the application is going to be running on them so for that we have this Android 12 specific section and here is where we have to define specific settings for the splash screen screen when it comes to Android 12 or later so here I'm going to come uncomment the color and since I want the color to be same for all of the flash screens regardless of whether it's running on iOS web or the actual Android 12 or above then what I'm going to be doing is copying this color and coming back and then actually pasting it here like so under the Android 12 section to command save then I'm what I'm going to be doing is running the same command again so it's going to go ahead and do everything for us once again and then I'll start running my application again and hopefully this time when the application spins up the actual splash screen that we're going to be seeing is going to be a background which is going to be green in color like so so once this is done the next thing that now we're going to be taking a look at is how can we show the image instead of this default app icon that we're seeing well to do this what we're going to be doing is coming back to the pope.l file and specifically there are a lot of settings that you can change to achieve a lot of different variations of your splash screen but the one we are concerned with is going to be the actual property that says image and this is going to be this property right here so I'm going to uncomment this line and then I'm going to be setting this equal to the actual relative path to the asset logo.png so that's going to be under assets images spash and then logo.png like do and do command save and then since for Android 12 the settings are different then I'm going to copy the same and I'm going to come down to the Android 12 section and here the actual property that we're going to be updating is going to be the image property so I'll uncommon this and paste this here like so and do command save Android 12 also has a bunch of other settings that you can s such as the icons background color The Branding so you can take a look at all of these and try to understand there are a lot of parameters that you can tweak to achieve different functionality but this is what we are going to be doing for now so now that I've done this the then we're going to do the same thing which is to save our pope.l to run flutter native slon create it's going to go ahead do everything for us you're going to see that now the actual outputs are a bit different it's also giving us output for creating images and once this is done what I'm going to be doing now is actually start debugging my application so now what you're going to see that our splash screen is going to be updated and we're going to see a different type of splash screen that's going to use our defined image and our defined background color as you can see so now the last thing that I want to discuss is let's just say that for some reason your application has to do some initialization before the first screen is presented to the end user maybe you want to update your service locators by using gex and register some services or something else so how can you do that while showing the splash screen and once everything like that is done then move on to your actual application well to do this it's going to be pretty simple if you're using this specific package and the way we're going to be doing this is first I'm going to be coming to my main doell I'm going to be marking my main function as asynchronous and once this is done then what I'm going to be doing is actually making sure that the flutter widget bindings are initialized and that I have access to them so I'm going to be doing that by using the following code where I'm doing widget flutter bindings do insure initialized and then once it returns widget bindings to me I'm saving that within this actual variable once this is done then I'm going to use the actual flutter n Splash plugin and I'm going to do preserve and what preserve is going to do is that it's going to allow us to manually determine when we want to basically get rid of our splash screen so it's going to preserve the splash screen until we actually remove it ourselves so it requires widget bindings so we'll give it the widget bindings and there we go so now that this is done the next thing that I'm going to be doing is doing any kind of logic that I want to do in terms of either using a service locator dising services maybe setting up the application importing environment variables whatever I have to do to set my application up before it's ready for the user so to demonstrate this what I'm going to be doing is actually just doing an evade call here which I where I'm going to be doing future. delayed and here I'm going to say that we're going to wait for a duration and that is going to be in seconds 5 seconds so I'm going to wait for 5 seconds um and then I will proceed to the next line of code and here once we want to remove our splash screen then what I'm going to be doing is flutter native spash Dot and here you can do remove move and this is how the logic is going to work so basically when our application spins up we are going to show the splash screen then we are not going to be removing it we're going to preserve it till we decide when we want to remove it we'll do any kind of actual setup logic that we need to do in my case we're just going to wait for 5 seconds and then we'll call for other native Splash to remove that splash screen and then start running our application to actually show it to the user and then let our user do whatever he wants to do so with this done to command save and I will start debugging my application and hopefully now you're going to see that when the actual splash screen is going to be launched it's going to stay for much longer than what we were seeing initially so as you can see the splash screen is being shown 1 2 3 4 5 and after around 5 seconds it's going to show the application to us so that's pretty much it for today's tutorial I hope that you enjoyed this tutorial and learned how to create your own custom Splash screens using flutter as always leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and if you have any question comments or concerns feel free to leave them down in the comments below and I'll try my best to answer them for you so stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 3,522

Keywords: flutter splash screen, flutter splash screen tutorial, how to create a splash screen in flutter, splash screen source code, launch screen in flutter, splash screen package flutter, flutter splash screen ui, flutter animated splash screen example, android splash screen, create launch screen in flutter, flutter beautiful splash screen, flutter launch screen, flutter splash screen animation, flutter splash screen example, flutter splash screen native, ios splash screen

Id: anRc7BNESRQ

Length: 11min 38sec (698 seconds)

Published: Wed Jan 24 2024