Flutter Splash Screen tutorial with animation | Splash Screen 2023

today we are going to learn how to create custom splash screen in flutter this video is going to be very useful for everybody because we are going to not just cover or not just going to create a custom Supply screen but we are going to cover multiple Concepts so before directly getting towards the today's tutorial as you can see we are creating a login flutter application and we are about to create the custom splash screen in the previous black screen if you want to use net Splash you can get the previous video link is in the description or you can also get the link from the right top corner so let's get started okay so in this video we're going to learn how to create light and dark theme so let me just run the application and as you can see the animation has been animating and after five seconds it will be redirecting to the next stream which is the welcome screen now let's try to switch it to dark mode and rerun the application again and you can see that our application has been animating from splash screen to the main page or welcome screen so this is what we're going to achieve in this tutorial so let's get started in this tutorial we are going to learn multiple Concepts the first one is we will learn how to use stack and position widget we learn already stack and position in our flutter crash course but we will see a real example of stack and position widget then we will learn two new widgets which is the animated position and animated opacity for the animations so basically you are going to learn animations in this tutorial and after that we are going to use get X for the animation so this tutorial is going to be very useful I will also try to add more information about other topics so let's get started so we are inside the project we created for our flutter login application so the first we need to add all the variables all the elements that we are going to need for this splash screen so in the Assets in the images I have two images over here this is the first one and this is the second image that we're going to use then after assets go to source and in the features as we are creating authentication feature if you're not familiar with this folder structure we already covered the photo structure video you can get the link from the description below so inside the authentication I have created two screens if both screens are inside the folder I have created this folder because all the widgets that we are going to create specific for this screen will go inside the splash screen folder and all the common widgets will be inside at the Top Root so same goes for the welcome screen so welcome screen will appear after the splash screen inside the controllers there's nothing in the class this is a simple empty class flash screen controller we will get back to this when we will start our get X so inside the splash screen the first thing we need to do is we need to design our application so to design a verification we will start with returning a scaffold as in the main road dot you can see we are calling our splash screen so you know insert the scaffold let's start coding as a body of scaffold we are going to use stack layout widget in the stack let's add children's okay now inside the children we are going to add the image so first we will write the position widget and as a child I am going to add image over here now in the name of the asset widget we will go to constants and in here you can see your also created these four files these are the colors dot dot that we are going to use in our application image strings we will keep adding all other strings of the image because you can see we will go to assets images and we will add this image let's suppose we have four to five images used in our application now we want to change that image on multiple locations so we have to find it and that is a hectic routine so instead of changing the path or instead of changing the name we will simply come over here in the image strings and we will update the name and this variable will be used on all the other presses we'll do the magic so then we have sizes we will also keep adding sizes as required then in the text strings we will add all the text strings over here okay so in the asset image we have our image top icon now in the position video let's add constraints top zero and left 0 let me just save the application so as you can see we have our icon this yellow icon at the left top Corner if you don't want to put this icon right behind our top app bar you can simply wrap this stack widget with a safe area then save it and you can see that now it will not inside the notch design so this is how we work change it back okay now image has been added let's add the second element we'll use column widget as a left we have t default size and from the top we are going to make it 80 and inside the column we have two texts so inside the column we have added two text this error is because we are using constant over here let's remove this add only constant with this let's save the code you can see that the text is being too small so we are going to use our theme design that we already created as a style we can use theme dot of context if you are new you can watch the previous video about and you can see we have two texts with the theme applied now to shift them to the left side we have to add as a column cross access alignment if you don't know about anything about the columns and rows you can also watch the videos link is in the description for basic crash course let's save it and you can see it shifted towards the left side the third one is again an image so let me just copy this now we're not coming from the top now we want to animate it from the bottom so it will be 40 from the bottom change this image to Splash image save the code and you can see that image is right there but we need to increase a bit more from the bottom now the last one is to create a container it will be bottom 40 as a child we are going to create a container so you can see we have a container at the left side as a color we are we also use the default color so at the bottom we will make to right from the right we also give the same size default size and you can see it shifted to right to make it circular so use box decoration here and we will make it circular and as a color we pass the primary color we remove the color from here because when we use decoration we cannot use decoration and colors both simultaneously so this is the design we want so design has been completed we want to move towards the second part which is to add animations now we want to animate the design so now for the animations we need to change the stateless widget to stateful widget because our screen will change the widgets at the runtime so we'll hover over this straight plus widget or you can press Alt Enter convert it to stateful widget and straightforward widget is created okay the first one is that we are going to need a variable Google animate is equal to false so using this variable we are going to animate our widgets okay now for the first widget you can see we want to place it at the zero means this current design will be visible when it is at the zero so we will write a condition animate question mark because when it is animating animate is true then we want to place it to zero but but if it is 4 we want to push it back to minus 30 so same for the left side we will animate if it's true we will make it to 0 which is the actual design and if it's false we will put it to minus 30 means offside the screen so this is the main reason we are using stack widget now let's try to save the code you can see currently as animate is equal to false and it's being pushed back to the top left so to animate it we will change the animate position to animated position and this animated position requires a duration property now let's save it you can see it's at the top so to animate the screen we would wait for the 500 milliseconds and after that we are going to change the state to true for the animation and we have to rebuild the widget which is animated position so to do that we will call or to override press Ctrl o and in it we will find init State initial State and in here we are going to call a function with start animation create method start animation so it is not a void it will be a future type and we have to make it async because we are going to use a weight because we have to wait the compiler over here we don't want to move the compiler to the next line so write future dot delayed we want to delay for how much long as a duration will pass milliseconds 500 milliseconds mean half second thousand means one second so after this we need to call a set State and we will pass animate is equal to true and also let me just copy it and paste it over here after five seconds we can in the next line we can call the next screen which is the welcome screen so after five seconds we will using a navigator.push replacement push replacement means that this splash screen will be destroyed and next welcome screen will appear after how much seconds after 5 Seconds so now let's try to run the application again in the run or restart and you can see that icon has been animated from the top and after five seconds we have moved towards our welcome screen now switch the text widget to animated position let's restart again and you can see the text is coming from the left side and the icon is coming from the top and the left side so this is how we create animations so now the next widget that we're going to talk about is the animated opacity so we will wrap this column with a widget we need duration for this as well and also we need opacity property and for the capacity we will call this animation widget animate if it's true then we want to display our icon and if it's false we want to hide it zero means completely hidden and one means completely visible now let's try to run it again and you can see using the opacity it's coming from the left side to the right side to its location so this is how we add animated opacity and animated position so let me just add animated opacity and position for the other elements okay so I have added an animated position and opacity for all these now let's try to rerun it again or restart and you can see that all the animation is working pretty fine with the animated opacity and animated position okay now as you can see we are using a stateful widget with this init State and also we are using asynchronous functions over here so instead of this when we are going to use a get X for the get X we first have to go to pubspect.aml you need to add this dependency get dependency once added make sure run the first pop clean and then pop get and after that let me just change it to stateless widget open it just remove this line so as all the logic will be separate from the design so this variable will also move cut from here we have already created in the features in the controllers press screen controller first thing is we need to add a variable let's close this init State and we also remove the function from here and move towards the controller and paste the action over here we don't need this set state but we just need to make this animate to True okay now in here for the get X the only thing that we need to do is get X we need to extend our controller with uh get x controller now we want to change this pool to make it RX boom RX boost means that when we are going to use observable observable means that this value should be observable wherever this animate variable is being used when the value is changed inside this animate it will be affected to all the screens simultaneously you can see its RX boost means that it is a getex Boolean so to change this getex Boolean you can see the value of type Bool cannot be assigned to variable of type RX so to make it Bool we will write dot value so this value is basically a Boolean now let's just remove this instead of also using this approach we just have to call get dot 2 and inside we need to call welcome screen and that's it we don't need context we don't need anything we are not passing context over here which we passed over here if you want to use this you can use it but this is the benefit of using get X okay now the last thing about this controller is we want to access this controller instead of creating its instances we will write static splash screen controller which is the name of the class get find so this is a simple getter with the find which is going to put this get dot find so whenever the splash screen controller is going to be used we can easily find it using this get dot find property we don't have to call its instances so now that's it for the controller head back to the design you know how to call any controller any class like this no we are not going to call any controller like this because we are creating a new instance of that controller but we want to make sure that whatever is inside or whatever the state is inside this animate should not change we are not going to create a new replica of this class but we want to use the same replica which has been initialized at first in the widget tree so instead of this we are going to write a simple variable the final variable so this constant must be removed the final variable which is a splash controller and then using a get dot put in the controller you can see we write get dot find and over here we are using get dot put and what we want we want splash screen controller import this Library also this one now we have the controller we want to initialize so whenever the widget loads we want to call our function start animation so this is going to run the animation for us now inside this you can see the application don't know about this anyway so we want to get the animate from the splash controller we'll write splashcontroller dot animate dot its value because the Boolean is inside this value so replace this with all the values of the values has been replaced but in here you can see that it is a stateless widget so how we can update a stateless widget when we load our application it will show a simple white screen it is not going to animate because when we load the application this value is false the start animation will be called and value will be turned to true so that True Value will not going to be implemented to all or not going to update all the widgets so to update the widget because it is status widget we have to wrap this widget in The Observer so we have to create a function like this so now this is the Observer and remember that I was talking about this go to the controller and I was talking about this this is observable this is going to be observed but who is going to observe flutter is not going to observe because what I don't know about this observable get X know about this so get X has a property which is observable so instead of this we can also use a widget this is a widget requires a function but we can also use get X and get Builder now this Observer is going to observe this element so whenever this element is going to be changed whatever we passed inside this observable as a function which is a widget it is going to update this same as we update in the stateful widget so we have to wrap all the widgets whoever is using this animate property so you can see I have just wrapped all these elements in the observable now let's try to run our application again and you can see the screen is animating because our screen is animating but in here you can see it's not moving to the next screen the reason is we have to find the error which is context Flex navigation without a get what you'll have okay so we need to use go to main dot instead of this material app we have to wrap our class with the get material app which is the getex material app so now it is going to convert all the implementation all the implementation remain same it is not going to update but all the navigation and routing will start working now let's try to restart my hot restart again so it's animating and after five seconds you can see using this get dot 2 which worked we are inside the welcome screen so this is how we learn all these Concepts if you have any confusion regarding any concepts you can ask me down below in the comment and if you worried about the getex controller don't worry we're using this catex controller in rest of the application and I'll make sure that you learn each and everything about this get X so this tutorial was a bit long but I hope this tutorial will be helpful for your future application development so that's it for this tutorial if you learn something new please like the video and if you are new to this Channel please don't forget to subscribe because more amazing videos are coming thank you for watching take care Allah face

Channel: Coding With T

Views: 51,816

Keywords: flutter splash screen, flutter splash screen tutorial, splash screen flutter 2023, splash screen in flutter, flutter splash screen animation, flutter splash screen and login, flutter splash screen getx, splash screen using flutter, splash screen with getx flutter, flutter splash screen example, splash screen 2023, flutter splash screen 2023, flutter splash screen animation 2023, custom splash screen flutter, custom flutter splash screen, flutter custom splash screen

Id: a6IX3tj1wtk

Length: 17min 54sec (1074 seconds)

Published: Tue Aug 30 2022