How to Create a Splash Screen in Flutter App? | GeeksforGeeks

[Music] hello everyone welcome to geeksforgeeks and in this video we will be learning how to create a simple splash screen for your app in flutter so first of all if i just show you a simple example of what is a splash screen you can see that whenever i open any app let's say i open youtube you will be able to see this youtube icon with a complete white screen and after a gap of like 1.5 seconds then the main youtube appears right you can also observe it in this play movies so whenever i open it you can see that a simple splash screen of this icon and google play and then my movies app will be running so this is a simple splash screen and the duration of how much time you want to show your splashing depends upon you and we will be seeing this in this tutorial so first of all we are going to build it from the scratch like we will be creating a simple splash screen and we will be coding it using navigator. we will be uh navigating from one screen to another but we will also be teaching you how to create a simple uh splash screen by using this animated splash so first of all i will be teaching you how you can create your splash screen from the scratch like we will be creating a splash screen and we will be using navigator.off for navigating from one page to your home page but i'll also be teaching you how you can use this animated splash pub.dev package to create the animated splash like this you can create transitions you can add some animations in your splash screen so let's start coding so first of all i have this simple new application and if i just start running it you can see a simple counter app will be appearing in front of me so let's wait for running so now you can see that a simple counter app is in front of me if i just click this floating action button you can see that counter is increasing now when this app ran i could not see any splash screen so now i want to add a splash screen so over here in the lift folder i am going to create one file called splash dot dot and in this first of all i am going to import material dot dot and now i will create a stateless widget why i am creating a stateless widget because during this complete splash screen animation or anything transition you can say or navigation i don't want to change the state of any widget right so whenever you define a button with that some function then you have to define a stateful widget but at this current state i don't want a stateful widget that's why i've defined a state less widget and i'm going to call it splash simple splash right so now in the main dot dot you can see that this is my complete app and in the theme we have a simple theme data and the home i am calling the my home page but instead of calling this home page which is present over here i don't want to call a home page i want to call a splash screen so this home takes that widget or that class which is to run at the first time when your app will be launched so over here i'm going to return splash so let's import it and yes so now it is imported now if i just go on splash and you have to start decorating it so in this i am just writing a container but instead of returning a container i'm going to return a scaffold and in this scaffold i want to just define a simple body i'm not defining any app bar because a splash does not require an app bar and in this body i want to return a simple container and to this container i want to give a child and to this child i'll just give a simple text so let's give a simple text and i'll call it splash screen and to this i just give a simple styling and i'll use text style and in this text style i want to use font size and i'll just increase the font size to 24 and i'll also increase the font weight font weight dot bold right and if i just save it and if i just rerun it you can see that i am able to see the splash in at the top left so i will wrap this container with my center and if i just save it you can see that now i am able to see the splash screen at the center perfect right so but now you can see that whenever i if i rerun this app also this splash screen is not going i want that after 1.5 seconds it should be gone and i should be able to see my home screen which is designed over here you can see this home page right so yes so how you can do it so for that we have to use a simple function and that function will be present in the init state now what is the init state so init state is a function that is uh that runs uh for the first time when your app when your class gets called right so over here i am going to call an init state and in this init state i am going to call a simple function called navigate navigate to whom right and to this now you can see an error so what is it the method in state is not defined for a super class called splash so what is the difference why i need to convert this stateless widget into state full widget because i am using the init state now what does this init state do it is going to change the state according to the function that you have defined over here so for changing the state we require a state full widget that's why i am going to convert the stateless widget into a stateful widget now you can see that only the error is coming that our function is not defined so over the over uh below this unit state i am going to create a function called navigate to home and it is going to be an async function because we have to use time over here and what is going to be the time i'll use await future.delayed and then you have to define the duration for how much time you want to show the splash screen so i'll write duration and in this i'll use milliseconds and i'll write 1500 so 1500 means 1.5 second right so after this duration we have one more parameter that is a simple function and we don't want to write any function so i'll just put semicolon and empty function now what after this delay so we have got a simple delay of 1.5 seconds over here now what i want to do after getting this delay i want to navigate from the splash screen to my home screen so i'll write navigator dot push replacement i want to replace this splash screen so if the user uh even clicks on this back button i don't want to see this splash screen right i want to permanently reach to my home screen so i'll write push replacement and over here we have a context then a new route so what is what will be my new route it will be material page route material page route and in this material page route we have to define a builder which is going to take a context and to this context we have to write the name of the class that we want to move on to so that is going to be my home screen let me see the name so it is my homepage let me just copy it and let me just paste it over here and then we can just import this my home page and i'll put a simple semicolon so it is not imported let me just import it again so for the sake of simplicity let me do one thing and i'll just go on main dot dot and i'll just cut this home page from here and i'll create a new file so that you should know where we are heading to so i'll just call this page as home dot dart and i'll import material dot dart and i'll paste that class over here so now i'll go to my splash and i'll try to import home dot dot yes so you can see an error my home page you can see that name parameter title is required so if i just go on home.dart you can see that it takes a parameter and that's a title right so we have to provide a title so let me just go on splash and i'll provide a parameter title to it and let me just call it gfg and if i just save it you can see that after 1.5 seconds i am headed to this home screen so if i just rerun the app again also you will be able to see the splash screen first so let's wait you can see the splash screen and you can see the home page so like this you can also design your splash screen so let's say i want to again work on that splash screen but you can see that after 1.5 seconds that screen is gone so what i can do is i can just comment this navigate to home from here so that this function should not be called and if i just rerun it you can see that again i'll be just staying over the splash screen and i can start working on it i can just design it let's say i want to create a simple container of blue color over here so i can i can just wrap this container with a column and i can just create one more container above this container that is text container and i'll just give the height to it let's say i give it a 100 and i give width also as 100 and i'll just give it a color colors dot blue and i'll just put a comma so if i just save it again i have to write main axis alignment because i want to see the column at the center so i'll write main axis alignment dot sender if i just save it you can see and using this container you can put an image inside this container to show your app logo right so this is how you can just create your own splash screen from the scratch now let's try to use animated splash to see some animations during the navigation so i'll just go on that animated splash pub.dev package and you can see that i have to copy this package name and i'll just go on my pubspec.ml and i'll just paste that in the dependencies so below it paste it so try to uh match the indentation without the indentation perfect in addition you will get an error now what we have to do so if i if you will just see that documentation also you will get everything you can see that you can navigate to uh you can use an icon to show the navigation you can use a custom widget so we are interested in showing a custom widget so how you can do it you can see the documentation that you have to return a super splash screen right so it is a little blurry so i'll just show you what we are going to do so now we have added the dependency animated splash screen so i'll just click on this upgrade button that is this download button and it will just input all the packages or dependencies that you have added just now so now go on main dot dot and in this instead of returning this home as splash you have to return animated splash so let's try to run animated splash screen you can see and in this splash we can just copy that splash container so i'll just come over here and i will just copy this center part so i'll just copy it and i can just paste it over here now in the next screen we have to define the homepage i'll write my homepage and you can give the title as gfg and if i just save it you can see the splash name but there's an error so let's do one thing and instead of returning the center let me just return a simple icon so i'll just comment this center and let me just return a simple icon icon start home let's say and after this icon you can also define the duration so and you can also go in the documentation over here you can see that in the example section you can see that in this animated splash screen we have duration then we have splash this splash you can create your own container or your own widget and then we have next screen we have seen the next screen we have seen the splash now let's see the duration if i just copy this only so it will be so this flash will be for three seconds if i just paste it and if i just rerun now you can see this animated icon home and this animated splash was for three seconds so now if i just go on the other parameters you can see that we can also change the animation type so let's use this splash transition.fate so let's copy these parameters only so and let's paste it over here and for now let's just comment this page transition and let's focus on the scale transition in this video and we are getting an error so what's it so okay so let's call cut it out and let's paste it here only and let me just paste it we are giving the title gfc to the my home page and if i just save it let's rerun it because there was an error you can see this black blue background with the home icon and fade transition so here you can see this fade transition so this fade transition is only responsible for that fading effect for that icon so if i just cut it and you can just hit ctrl space so you will be able to see the other transitions also let's see this rotation transition and if i just save it and let's rerun it you you can see that it is rotating so this is the effect so let's use the last one that is scale transition and then we will wrap up this video and let's save it rerun it so you can see the scaling effect to this icon so like this you can create your own splash screen you can you can create your own custom splash name without using this animated splash you can use this animated splash screen package from the pub.dev and add that in your dependencies in pubspace.ml so i hope that you like this video and if you have any suggestions or feedback you can do that in the comment section thank you for watching this video [Music]

Channel: GeeksforGeeks

Views: 28,689

Keywords: GeeksforGeeks, splash screen in flutter app, splash screen using flutter, flutter splash screen tutorial, how to create a splash screen in flutter, splash screen source code, project ideas, create animated splash screen flutter, launch screen in flutter, splash screen package flutter, flutter splash screen ui, what is splash screen, flutter animated splash screen example, flutter projects for beginners, flutter app development

Id: XXISgdYHdYw

Length: 14min 20sec (860 seconds)

Published: Mon Jul 19 2021