Flutter Custom Animated Splash Screen| Aashar Wahla

hey guys my name is welcome to my new flutter video and this video will be an opener which you can add in other words you can save which will be a splash screen and this will be based on animation so let's start so this is what we will be building uh in this video so center with aw which is initials of my name and then this will be faded in the color choice is not perfect you can choose your color and of course the link to the repository will be down below so what is the plan in the world what will be the thought process so i have divided this into three parts the first one is a simple screen with ball inside moving up and down so basically a ball will appear which uh you can see have initials inside it it will come from this top of the device till the end and then it will move again in the center and then when circle stops it starts to expand in different color and then at last a white color a typo which i missed which at least a white color circle expand and a new screen feeds in so sorry for the typo so now we will implement this so let's start so this is already implemented and what i am going to do in this video is that i will walk you through the code and of course this will be uh the code will be open source and i will provide the github repository link down below in the description section so you can go there and make your desired changes and feel free to clone it and of course you can also store and fork it and if you see an improvement please let me know i know this is not the perfect implementation and i'm not uh a prof you can say an engineer with a ton of experience so these always a room for uh you can er errors so what i have done is that this is the main file and within main file all of these things are just as they are from the beginning of the app when you create using factory create command and then uh in the my app i'm going to splash screen within the material app let's move toward this flash screen this is us stateful widget and here if we go into the build method we have a scaffold with a background color so i have created a constant file with the background color which is by default black and if i restart the app you can see why it is so this is the black color so what we are going to do right now is once this color is completed then a splash body is another widget which is created separately and if we go up there are two methods which i have created which is start time to navigate and a create route so uh what will be happening over here so this is the function which will be the you can say duration of the animation and after this particular time period the next screen will appear sure and this is a create route function is called over here which is implement the fade animation and then move towards the home screen so that is pretty much it was happening on this particular screen and let's now move toward the splash body so this this is the screen where most of the stuff is happening so you have to keep an eye on this particular screen so now is the time that i should take a second hopefully you can see it clearly now because in my uh couple of last videos i have received this complaint that the font size was uh very small so now uh this is the screen where most of the stuff is happening so in here we are just getting a function on complete and this function will be executed when the animation will be complete so uh what is happening so we will be using animation controller and for that we need to import so import we used to have to use with keyword and use single ticker provided state mixing which give us access to this which is the instance of this class in which class we are operating so uh first of all we initialize a controller and we initialize an animation so why this we are using this because we need to add a curve to get our animation which in this case it is out so what are we going to do now is that we have almost three animations uh the start first star second and these are for the circles so what are we going to do now is within the init state we are calling the function start animation which is right over here so first of all we are initializing the controller and this is a pretty common way to initialize the controller and next we are setting the duration so what is the duration of this particular con and after that we are setting an animation so we can simply use this controller to do our animations if we just want it to be in a straight line but we want it to be in a curve so it should if i could show you if i restart the air so this will come here and it slow downs a little and then it takes up speed so that is a curve and we will be you we are using that curve so we will need this animation and we will be using curved animation class and when we i have initialized this through items then we have to add a controller.forward and this will start our animation so after that if we are adding a listener to our controller which will be every time a frame changes or in other words every times arctic operates so ticket is basically a timer which is provided as to us by a flutter and that ticker provider is updated you can say at every frame rate so if your screen frame rate is around 60 fps so that will update its 16 times per second and it is much more efficient than using a simple duration so what i'm going to do right now is in this listener we are just going to show that if animation value is equals to 1 so animation value is between 0 and 1 so 0 mean beginning and 1 min ends and the animation controller value is but between these two values so if the animation dot value is 0.5 it would mean that the animation is in center and it is halfway through the process so we have another value which is animation.reverse that if animation is going in the reverse then we will have this if statements and right now i think that it would not make much sense to you uh because we haven't went through the main process so let's first of all go through that and then we will come back to this later so first of all with the in the build method we are giving uh our we are getting our device height and width and which we will be providing which we will be using later down and then we will be using stack so now uh after that what we are going to do is create a cam canvas which will be a complete screen so after that we are going to check if start first is activated and then we are going to check if star second is activated and then we have our animation builder and at the last we have our start final circle so this white part is our animated builder and this is first second and white one is the third part so let me just explain you again so this one this one is the green circle and this one is the red circle and this is our animation which is a circle with my name initials which are aw usher follow and at last we have a white circle which then fades into a new screen so what's happening exactly is we have positioned our stack in such a way that this green and red circles appears to be appears to come from behind the animated builder and the white circle appears to come from the front of a circle which gives an effect of a new screen so just restart the app so you can have a clear look so our animation then green then red and then avoid from the above so now what we are going to do is first of all we will be focusing on our animated builder so any material builder is uh you can say a widget provided by a filtered and what this help us to do is that we provide it an animation uh which in this will be we can also provide it an animation controller but we will putting it our curved animation controller because uh we are using a curved animation and then we will give it a context and a child so in this this is the context and this is the child so and we will returning a value which will be a position widget so every time this value changes this will be rebuilt so first of all we are giving a position value if you don't know how the position and stack work i will highly recommend you to watch my video on the position and stack which i will be a link i will be leaving a link down below so you guys can go and check it out too so we will be giving it a left spacing suit it could be in center so y50 because it will be half of our container size so we want it to be center so we will take half of this side from half of the size of this container from both sides and top so this particular value will depend on this animation value and now after we having have the idea that how this will position then we create our container which will be box shape circle color white and which will have text aw with inside which uh if you want to implement in within your app you will just change it to your own initials and after that what we are going to do is we are going to have we are going to have a look at this animation.value so if we go back to our animation listener right over here so once our animation is complete it is reversed wireless so at this level animation is complete now it is getting in reverse and it is getting center so we want this animation so once it's complete we want it to get reversed and we will check if animation is in reverse and it is passed at half point then it should stop and when it would stop then we will our set state for the start first circle which will be i think so green in this case uh just let me check which will be yes which will be green in this case to true then that circle will appear and then after uh you can say delay one second a star second will be set to true and that will execute the second circle which in this case will be red and of course you can change the color based on your preferences and after one second we will implement the white color circle which is will be the last circle and uh this will then execute a circle and at the end of all this we will be implementing this function which we will get in the constructor of our splash body so this is the function which we are getting in a splash body which will be start time to navigate and after three seconds this will navigate to this screen using affair transition so let's move ahead and let me explain you what happened when we set our start first to 2. so uh i have created a custom widget for this stream and that will be a spanning circle and what's happening in this is again we are using our animation controller and in this case we are not using any curved animations we don't need a another animation controller curved animation control so we will be using a single animation controller and of course we have to use with single ticker provide so we are taking a constructor within the constructor of our expanding circle which we are taking a circle color which will be used to uh which will tell the what will be the color of the circle and then we have our duration because uh here we are get our initializing our controller and this function will be executed in our initial state the first time the widget will be get paid after that the controller should be forward and then we should add a listener communication thought was to implement something within it and that were not thought if we comment this out and restart the app i don't think so it will change anything so as expected it would not because after the animation is complete the controller is stored by itself but one thing is which you should keep in your mind is that you should always dispose a controller always so what is happening in the build method so within the building first of all we are getting the height and width which will be necessary and then within that we are creating a container within an animated builder and in the last section i did told you that why are we using animated builder because we want our animation to be to be synchronized to our changes in the animation controller value so every time our value of the animated controller changes it should update our builder method so we are having a container with a particular color and we in this case this is the color which is provided in the constructor of this widget and then we have a radius which is a milk calculated value and this took most of my time because it required a lot of regulations uh maybe tube because i'm new to this stuff and i don't have much experience to it took me some time to figure it out but this is the value which worked fine for me and of course you can just copy and paste it but you should understand that this is the height of the device disability device and this is one minus controller value so controller value is the value of the animation at that point so if the animation is halfway through again it will be 0.5 and if it's complete it will be one and if it is just started or it is i have not started yet then it will be zero and then we are giving it a height and width so uh this is point uh is something which i think suits me the best and i'm using it because the uh according to my calculations and what i have figured out is that the width the height is 2.5 times larger than the width so in case to make it appear like they both are expanding at the same right uh the same size height and width i multiplied the width by 2.5 which helped me mimic which helped me mimic the you can say expansion in such a way that it looked very good so that's for the this part and again for the start second it is exactly the same with just red colors and at the end it it is again the same with the white color and uh as i told you uh before that we are using this up uh before the animation build because we want this to be appear behind the animation control uh animated builder and the second one is the same case as we also want that to be appear behind their uh animation the circle with my initials and then at the end we want a white circle which appear above our animation container which will appear above so if i restart the app for the last time so you can have a clear log so this is what the app will look at the end so i hope this uh i really hope that this video will be helpful for to you and if this really helped you then kindly subscribe it and like this video it will help me a lot and it will motivate me to keep on uh making such videos so i can help you guys so that were all for me for this uh for this video and i appreciate your time for this video for almost i think so 25 to 30 minutes video and if you liked it give it a thumbs up again and thank you for watching

Channel: Aashar Wahla

Views: 156

Keywords: Aashar Wahla, English Tutorial, flutter animation, flutter animation tutorail, flutter animation course, flutter tutorial, flutter kicks, flutter animation series, flutter animation app, flutter ui, flutter developer, flutter dvelopment, flutter development

Id: 8ofAKhB3KUw

Length: 22min 37sec (1357 seconds)

Published: Thu Oct 28 2021