Splash Screen with Navigation in Flutter | Timer & Navigation in Flutter | Image Asset

hello guys so in this video we are going to create a splash screen so I just restarted 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'll just create a new file with the name slash underscore page dot dot so this would be a state plus widget and just give it a name flash page okay 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 we're not getting colors okay since we are not using any any any of these 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 calculator and in the scaffold we don't need app bar just to use our body part and use a container and in this container we can use some color s dot let's give it whatever color you want I just use this Amber the time being and now the thing is instead of using this home page we need to use this splash okay so here from the mean instead of calling this home page we just use splash page so you are getting error because we need to import this as well okay on the top we have imported Splash so we are not using this home page over here we can remove the save it 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 a image directly here or you can whatever have whatever you want okay so we just use a image hole 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 uh 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 correctly assets okay so how do you identify so simply just go for this pubspect.ama and there scroll down and you can see we have here assets so this lines are coming by default so 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 a images okay I am a g e s and inside this images I can just use my copy paste my image that is calculator.png and instead of using this we have to use this calculator Dot PNG just save so we just go for this once you save it it will take some time to a link with DML 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 skip 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 the static function and here you can mention the path that is that is we can just go for the CML file again we can just copy this paste it and now you can specify calculate dot PNG okay so just go for this save it and you can see your image is here now in order to make this image in the center we can wrap this with the center widget okay and the save it here you go now here we can change this color in order to match with the image background so just use it white in this scenario so 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 essay we can pass for the size 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 or and then context that is coming from this context dot size and let me assign this to a size variable that is y is variable and with this size you can get some properties like inspect ratio High to width okay so I just keep it with half of the width and you can see sizes like this we want after 2-3 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 why so because by default when you do it you will get the init method over here inside the state so init 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 the 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 a object of duration where we can pass some seconds let's say I am looking for um three seconds okay so since everything is static just use cones here and we do 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 part we are getting it and route so for route we have material page route okay so this Mysterio page route will take a builder 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 cost 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 builder and here we can pass this particular screen okay I just restart it in order to show you the splash is looking fine 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

Channel: Jatinder Verma

Views: 889

Keywords: Flutter, Splash, Splash Screen, Navigation, Navigator, MaterialPageRoute, Timer, Duration, Seconds, Redirect, One Screen to Other, One Screen to Second, One Screen to Another, Image.asset, Image, Logo

Id: 2ay_1alzi6o

Length: 10min 15sec (615 seconds)

Published: Fri Oct 07 2022