How to Create a Stunning Splash Screen in Flutter

in this video I'll be showing you how to create a splash screen for your flutter app to get started we have a simple project our main.dart file is essentially just running our app and then our app is just returning our home screen for our home screen we have something very basic as well we just have a scaffold that has an app bar with the title of my app and then we have our body that's returning a center with some text welcome to my app the app is very basic because the video is about a splash screen so let's go ahead and create that splash screen first we want to go over to our screens folder and make a new file we will call this Splash underscorescreen dot Dart and then we want to import our material and then we want to set up a estate full widget because we're going to be using state so to do that we just do stateful widget and then call it splash screen and then we can save this right now and then we can go back to our main.dart file and we want to load up our splash screen instead of our home screen because we want to start with our splash screen great now we can go into our slash screen and we can just set this up like a normal app so we are a normal app screen we'll do a scaffold the scaffold will take an uh body and then for the body what we can do is we can return a container and then we have to get rid of the const and then we can go ahead and style up our container so the container is going to have a decoration this is going to take a box decoration and you can style this up however you want we'll be using a gradient but you could use solid colors you can use a lot of different things but we're gonna just keep it simple and we're just going to apply a gradient to it so we'll do gradient and then we'll give it a linear gradient with some colors the first color is going to be colors.blue and then the second color is going to be colors dot purple there we go and then we do want to go ahead and give it um I begin and an end but all of a sudden you can see that we already have some gradient so we just need to do begin and we'll give it alignments dot top uh right and then for our end we wanted to do it the opposite so we'll do alignment dot bottom left so top right bottom left and there we go it starts at Blue and goes to a nice purple now what we want to do is add in our get out of our box decoration add in a child and then this child can be just a simple column inside the column we have some children and then we want to give it our child children so we'll do an icon to start we'll do icons dot edit this will be a little pencil we'll give it a size of 80 to make it kind of big and again you can make this whatever you want but this is what I'll be doing for this video and then we'll do colors.white so we essentially have this and then this is where our app breaks when we save it and it's because we need to make sure that our our container is going to take up the full size of our children so since our children doesn't really have a size since we're using our column we just need to make sure we give the container a size and to do that we can do width and then we can just do double dot Infinity which will make it do it as big as possible now that we have our icon we can go ahead and add a size to box just to do some spacing we'll do 20 and then what we want to do is add in some text and then the text we can make it whatever we want we're just going to call this flutter tips because that's what I'm making in this video which I hope you enjoy if you do consider subscribing and then we can give it a style of a textile and then we just want to style it a little bit so we can do font style we'll make it uh italic there we go and then we can also do a color of colors dot white again you can style this however you want I'm just showing you an example and then we'll make the font size 32. cool and then if we save that we obviously want our column to be in the center so there we go so this is going to be our splash screen now what we need to do is we need to make it work like a splash screen where it only shows for a couple seconds and then goes to our other page to do this we can come up to the top of our stateless widget and then right after the state we want to call with called a single ticker provider State mix-in that's a lot to remember but it pops up when you type in single so what this does is allows us to use other things like duration and and animations and all of that stuff which is really cool and then what we can do is now that we have that we can do an init State init State essentially just runs as soon as this screen loads and what we want to do is we want to tell it to load something so what we want to do is we want to load system Chrome dot set enabled that's not working make sure we uh there we go you have to install the services and then we can do set enabled system UI mode and then what we want to do is give it a system UI mode and we can give it a system UI mode dot immersive there's a few different ones but the immersive is the one that we're going to use and what this does is when we save it it actually will get rid of our top and bottom bar now because we're doing init State we actually need to refresh it because it's only going to load at the very beginning but when we refresh our app you can see that now these are gone which is great and then of course uh because we're using that we need to make sure that they come back so we can add in a dispose this way when everything's done with this page anything we put in here will happen afterwards and then we can do that as we just need to kind of do the opposite so the system uh Chrome it's Chrome Dot and then we need to set enabled uh system UI mode and then for this one it's a little bit different we have to do UI mode uh dot manual because we're going to manually control what we want to happen um and then what we're going to do is give it some overlays and then we if we want to do both the top and the bottom which we do instead of giving it an array of overrate overlays we can just call system UI overlay dot values which will give it both of them and then that will be good when we leave this screen they will come back because you want them in the app but you don't necessarily want them on the slash screen and now all we have to do is when we refresh our app we just need to set up a timer that will take us to another page so we can do that right below our dispose actually we want to do it in our init State here we go we want it to happen right away we wanted to start right away counting down the the time so we'll do future dot delayed this is going to delay it a certain amount of time and then we can do duration and then we just need to give it a duration in this case not days but seconds we will do two seconds and then we just need to return a function of what or a method of what we're going to do after those seconds are up and this is very simple what we wanted to do is we wanted to navigate to a different screen so we can do Navigator dot push normally you would push stuff which lets you go back but we don't want to be able to go back so we need to do navigator.ov context dot push replacement and this will give us a new replacement that we can use and then for this replacement we want to return a material page route chicken open and in this material page route so if I spell it right is going to take a builder we don't actually need to use the context in this scenario so we can just give it an underscore and then we will just call our home screen so essentially I know I went a little quick on that and we need to make sure we add our commas there we go and this should be a comma there we go mix those up so essentially what it's saying is create a future and then delay that a certain amount of seconds in this case we're doing seconds too when it's done we wanted to navigate uh use the Navigator of our contacts push a replacement and then we're just going to use a material page route which will allow us to go to our home screen so when we refresh what will happen is it's going to start it's going to count two seconds and it's just going to take us to your app and again you could customize this however you want you can add animations here which maybe we'll do in the future you can add different welcome screens here you can make it where it only loads when your app's done loading data there's a lot of possibilities here but as you can see when we refresh because we added on the system overlay dot values it's bringing back so the the top bars are high and then they come back so yeah I hope you guys enjoyed this I would love to see what you guys want uh what you make with these uh Splash screens if you want to show me them you can reach out to me on Twitter I also have an Instagram I'll put a link in the description love to see what you guys create that's why I make these videos help you guys make stuff but I really want to see what you make so send them to me if you want to and yeah I hope you guys enjoyed this video and I'll see you in the next one

Channel: Spellthorn

Views: 41,901

Keywords: Spellthorn, Flutter, Splash Screen, UI Design, Mobile App Development, Flutter Widgets, Flutter Functions, Flutter Tutorial, Dart Programming, Material Design, Android Development, iOS Development, Mobile Development, Cross-Platform Development, User Experience, User Interface, Animation, App Design, Programming, Coding, App Development, Software Development, UI/UX Design, App Design and Development, Mobile App Design, Mobile App Programming, Splash Screen Design

Id: baa0SlEDimk

Length: 9min 31sec (571 seconds)

Published: Tue Apr 25 2023