 Hello guys. So in this video, we are going to create a splash screen. So I just restart this app in order to show you that we don't have anything apart from this on screen. Okay, so what to do now we just create another screen here. I just create a new form with the name splash underscore page dot dot. So this would be a state plus widget and just give it a name. Flash page. And again, we have built here. So what we need to do here just return a container. And inside this container, we can use some color so that we can see colors dot. Oops, we're not getting colors. Okay, since we are not using any any any of the scaffold, so just do what wrap it with do we have any scaffold? No. So what we do is I just cut this and use scaffold. And in the scaffold, we don't need app but just use a body part and use a container. And in this container, we can use some color. Color start. Let's give it whatever color you want. I just use this amber. The timing. And now the thing is instead of using this home page, we need to use this splash. Okay, so here from the main instead of calling this home page, we just use splash page. We are getting error because we need to import this as well. Okay, on the top, we have imported splash, but we are not using this home page over here. We can remove that. So once you save, you can see a full screen of this amber color, whatever we have specified. So here we need one chart. This child can be something like. You can have the image directly here or you can whatever have whatever you want. Okay, so we just use an image for here. So before that, I do have one logo here. This is the logo. So we will use this image as a splash screen. So in order to work with that resources images, we need to create a separate folder for the same. Simply right click and new folder and assets. Okay, yeah. So you have to create it inside your app folder, roughly assets. Okay, so how do you identify? So simply just go for this pubspec dot emma and their scroll down. And you can see we have here assets. So this lines are coming by default. I just uncomment this and uncomment this. Now the default way they are recommending to use this images. So generally we use this folder. So what I do is just inside this assets, I will create images. Okay, I am a G E S. And inside this images, I can just use my copy paste my image. That is calculator dot P N G. And instead of using this, we have to use this calculator dot P N G. Just save. So we just go for this. Once you save it, it will take some time to re-link with the ML. Okay, so we are getting that nothing is there does not exist with this. Okay, so what we need to do just here, we need to mention the assets folder as well. Okay, and once you have done this, you don't need to. We can simply just keep this and save. Okay, so once this is done, you can simply go for your UI part. So we have image class dot asset, that is a static function. And here you can mention the path that is that is we can just go for this ML file again. We can just copy this. Paste it. And now you can specify Calculator dot P N G. Okay, so just go for this, save it. And you can see your images here. Now in order to make this image in the center, we can wrap this. Now in order to make this image in the center, we can wrap this with the center widget. Okay, and save it. Here you go. Now here we can change the color in order to match with the image background. Just use it white in this scenario. You can change it whatever you want. And if you want, you can just change the size as well. I just use a comma for this. And here under this image dot asset, we can pass for the size. Do we have size now? Do we have any other property? We have this height as so we can specify whatever height you want. What I do is instead of specifying height, I will use a bit. So I want the width should be half of the screen. Okay, so how do you get the width and height of the screen? So in order to get that, we have media query, media query query dot. And then context that is coming from this context dot size. And let me assign this to a size variable. That is size variable. And with this size, you can get some properties like the spectrum ratio, height, width. Okay, so I just keep it with half of the width. And you can see sizes like this. We want after two, three seconds, it should navigate to the home screen. That is my home page. Okay, so for that, what we can do is first of all, remove this. And the easiest way is you can simply convert this widget to stateful widget. Why so? Because by default, when you do it, you will get the init method over here inside this state. In its status there, that would be executed once the instance is created after that. So we want one code that would be executed after two seconds. Okay, so for that, we want to use a timer. So timer class is there. Okay, so just use this timer. And it takes two arguments duration and a function that is a callback. So I just use a semicolon first of all. Then we need a callback. I just create a anonymous function. And for duration, it is looking for duration instance. Just create an object of duration where we can pass some seconds. Let's say I'm looking for three seconds. Okay, so since everything is static, just use const here. And we can remove this thing. Once the seconds are over, we need to navigate to home page. So in order to navigate from one screen to another, we have navigator class. So navigator class provides some list of methods. So what we want once we move from this screen to the next screen. If I press back button, I should not be able to come back on the screen. So in order to achieve that, we have push replacement method. So this again take context, which is wide apart, we are getting it. And route. So for route, we have material page route. Okay, so this material page route will take a better. So I just use some simple context and this arrow function. Put the semicolon in the last. And here you need to mention where you want to navigate. So I want to navigate to home page. So since it is a const, so just add this. Okay, so just remember this thing. Okay, so you have seen automatically it is moved to tab screen. So just use navigator.push replacement that takes context and the route. So for routing, we have material page route, which takes a better. And where we can pass this particular screen. Okay, I just restart it in order to show you the splashes working fine. The restart it splashes here and three seconds are over. So that's all for this video. If you have any doubt and query do comment in the comment section. Thank you.