Flutter Animation 2023 - Animate any widget in flutter - Animated Widgets

assalamualaikum and welcome back to coding with tea today we're going to learn about the animations in flutter and in this tutorial we are also going to learn how to create a custom widget a widget that can be used on any type of application or you can animate any widget you want using our custom animation widget you just have to wrap whatever the widget you want to animate with the custom animated widget and as you can see on your screen that in the previous story we learned how to create animations for the splash screen but those animations were for only to animate in but not to animate out so you'll also learn how to animate in the splash screen and then before jumping towards the next screen how to animate out all the widgets and after that you can see that this is the welcome screen that we created in the previous tutorial and in this welcome screen we as the elements are coming using the animation so we will also use that animation inside the whole container so we will learn multiple things in this tutorial as you can see on your screen that we are creating this login application and as the next tutorial was about to create login screen design but instead of creating the login screen design i got a lot of requests about two animations to talk a bit more about the animation so i have decided to create it now so before directly jumping into the login tutorial i've decided to create it the animation tutorial so let's get started open android studio we are inside the project we are creating for the login application again those are new to this playlist i suggest you to watch the previous videos and also you can get the link and the source code of the complete project from the description below so in this application uh you know that we created in the previous tutorial the welcome screen the design is also on the codingwit.com and link is in the description so this is the design that we created so today we want to animate this design and in this price screen we basically created our animations so let's open it and you can see we have animated position and animated opacity so to put all the logic away from the design we use the get state management and also in that tutorial we learn without using get x using a stateful widget so in here you can see it's a stateless to save the ram we use stateless widget and we pass all the code to our controller right so if you don't want to use the get x you just have to cut this code and paste it over here make it too straightforward and that's it so the first thing that we are going to do for today's tutorial is to create our custom widget go to lib folder source features and inside the splash screen i have already created splash animation widget so as i talked about that we are going to create the animation that can be used on any type of widget so instead of creating it inside this splash screen inside the common widgets create a new folder name it fade in animation and inside this let's create a design file animation design dot dart create a stateless widget so this is a simple empty stateless video let's remove this the one created in the splash screen now go to splash screen and this time go to refactor extract flutter widget so i'm going to name it t fade in animation click refactor and at the bottom you can see we have a stateless class created so let's just cut it from here go to the custom file we created replace the stateless class import this library so the first thing you need to understand is that we have animated position reject to animate it we need top left bottom and right maybe we need top for some widgets and top and left for some other widgets and maybe so you can see we can create any combination so for that we need to pass two values over here the first one is the after value which you can say the top after and this is top before so we want to animate it from this position to this position so this means that we are going to need two variables for each top so instead of creating all the variables over here let's create inside this fade in animation folder create a model class fade in animation model dot dot so i have created a simple empty class and name it t animate position you can name it anything and inside i have created you can see two values the first one is top before bottom before left and right before and then same top after bottom left and right after and then in the constructor i just call all these values so you can see this is a double type and both are nullable so it's up to us when we're using this animation position widget if we want to pass this top before or any element then we can otherwise it will be now right to close this model okay now inside this animation design the first thing we need to add our duration variable you can see we have two durations so we can add a duration in the milliseconds so at the top so it will be final integer type and name is duration in milliseconds let's replace this duration with this one duration in milliseconds and we have to remove this constant also to get the duration from the user or from the one who is using duration is required because without duration it is going to give us errors so it should be required we know if we see over here that we have a splash controller so we are also being dependent on this flash controller so we don't want to depend on any activity we want to create our own custom animation so again i am going to go to the controllers splash controllers cut it from here fade in animation and paste it so now we have splash screen controller let's right click refactor rename it i'm going to name it fade in animation controller click refactor and also change this name to now go back to design and we can simply directly call this as in the splash screen we are calling using the get output let's just cut it over here from here because we don't need it go to the design and let's replace the splash controller with get dot put with the fade in animation controller let's import this dependency so to replace this name as flash controller control or with the controller hit replace all and that's it we don't need this controller from anybody now let's remove this constant okay we have this controller placed we have the duration now we need to add top left bottom and right so we have top left bottom and right all the values placed and now we need to add these values that we created in the model so let's add that model first and the name of the model is t animate position okay now let's try to add a model to add all these values over here or to replace these values so the model is added we will get the values of this model from where we are using this just remove this underscore so this is also going to be nullables for add a question marks so by making this null means that if someone is going to pass the values inside this animate position then this is going to animate accordingly if nobody is going to pass any value inside this animate position then only this opacity is going to work so let's remove this using animate position dot top after after come first because this is the value that we want to place our animation and this is the before as it is nullable so add exclamation at the start remove all these values with the animate position dot okay you added all these names let's just simplify this name to animate control or to replace and replace this animate position with this okay in here we are almost done but the last thing is we need to replace this image with the child widget that's commented first and as a child we are going to create the custom child final widget add a widget name its child and that's it now this child is being replaced with this child and over here required desktop child and as this animate is null so we don't uh need required over there okay our widget is ready so let's have a quick recap we created the custom widget replace the duration add animations for all the widgets all the points and then as a child we are we have added a widget and in the splash screen you can see we are calling this start animation so instead of splash screen controller we have fade in animation controller dot find and we have a start animation function which is basically running the animation okay now as the first element as you remember that we have an image in the splash screen we first call our widget the custom widget which is t fade in animation and as a values press ctrl space and we need three three values child duration and animate so let's add a duration 1600 milliseconds after the duration let's add animate property and animate is d fade in animation animate is of the animation position alt enter imports library now inside this d animation position we can add top after and top before top after zero because it is at the 0 from the top and top before is minus 30 and we also have left before as minus 30 and left after as zero so we have added the animation and then as a child we have one single image place this child with the one we created so let me first just remove all the obx animated position with the fade in animation top is fixed we will write top four and top after as 80 it's not going to animate now and then as a left so you just replaced all the elements with the t fade in animation and you can see that we have three properties for all duration animation and child so you can see the code has been reduced reusability has been applied now let's try to run the application this one here we got an error which is t fade in animation controller not found so inside the splash screen let's go to the top and this animation control is not found so in here at the top as we use this get output we just have to copy it paste it over here and with the help of this controller we can simply call this function which is start animation let's do the hot reload so our application is now working we have the animation as we created and then we have our welcome screen so let's go back and then application is closed let's rerun it and you can see that it is animating as it was animating before but now the splash screen is not dependent on any type of animation it now the next thing is that we want to go to this animation controller and you can see that this function is being called when we try to animate and this boolean variable is animating our animation so inside this function after this many seconds i want to make this animation to false so it can go back let's just copy this paste it and now after three seconds as at the top you can see after 500 milliseconds or the after half second we start the animation and after three seconds we want to revert the animation to go back after two seconds we want to jump towards our welcome screen so get dot off all is going to replace all the activities created before and the first activity will be or the first screen will be the welcome screen this method work fine for the splash controller but not this is not going to work for the welcome screen because over here you can see that it is being animating after some interval and after this many seconds it is going to welcome screen but we don't want to do this so let's create another function so change it to start splash animation and this one is start animation splash animation will automatically jump towards any other screen but this is not going to jump toward the next screen but let's close it we also don't need this one and also we don't want to jump towards any next screen we just want to wait for 500 milliseconds and after that we want to start the animation now let's go to splash screen and inside we don't need to start animation but we need a start splash animation and we will call this start animation inside the welcome screen now let's perform the hot reload our animation work fine come in and it goes out and after the two seconds our welcome screen arrives now inside the welcome screen we want to animate it now to animate it you know that this container and this column cannot be animated using the animated position widget first have to wrap this container with the stack widget because tag allow us to animate from anywhere from any position to any position so wrap this with a column widget because it has the property children replace the column with the now we have a stack we can easily wrap our container with a widget which is our custom widget t fade in animation let's import the library and as you know that it is going to require some time let's say 1200 milliseconds and we don't want to animate it opacity is already added so now to add the animate you need to add the animate position also we need to import this library and now inside so anywhere that you need to notice one thing that we need to animate it from the bottom from bottom android to bottom 0 minus bottom 100 but as at the top here you can see we have the main widget which is the stack widget so we also have to make sure that we need to pass zero for all the left right and top variables you can here you added all the elements because this is going to stick our layout as it is inside as we created in the container as in the splash screen we want to run the animation we just call this animation controller and inside instead of start animation splash animation we will call this start animation and this function is simply wait for five seconds and then start this animation rerun the application hot restart splash screen is working coming in going out and you can see that it's being animating beautifully so that's it for this video if you learned something new please like the video and if you are new to this channel please don't forget to subscribe because we are going to create more amazing videos so the next video is the login video stay tuned thank you for watching take care a lot

Channel: Coding With T

Views: 21,967

Keywords: flutter animation, flutter animation tutorial, animation in flutter, Flutter animation 2023, Animation in flutter 2023, flutter animated ui, flutter custom animation, animatedpositioned flutter, animated position flutter, animated opacity in flutter, how to add animation in flutter, How to create custom animation in flutter, animate anything in flutter, coding with tea, flutter animations tutorial, flutter animations, coding with t, learn flutter animation, flutter app 2023

Id: 0orluUfFawI

Length: 14min 17sec (857 seconds)

Published: Tue Sep 13 2022