Animate Your Flutter Widget in Seconds

okay so if you will ask what is the easiest way to animate any flutter vget then I will confidently say this anime do flutter package this is a GameChanger package for implementing simple animations in your flutter wigets and literally you don't need to do anything that's why I told easiest you just need to wrap your wiget from these pre-built animated vets that is available in this package but that is not everything if you want to customize it that is also possible because these are the parameters available that you can customize like you can change the curve you can call a function on finish you can use controller so all these parameters are available to customize so simple yet customizable okay enough introduction now let's open vs code and do some handson okay so this is the simple flutter project that I have already created and uh the first thing that you need to do is add this anime to package in your dependency and run flutter PB gate or you can directly run flutter Pub add and this package name so it will add the latest version so once it is added we are going to so first let me introduce you with this simple project like in this material app I have created this scaold and there is a button outline button and on clicking up this button go to home it will open the homepage and this homepage is nothing but just a simple scaold and a simple app bar and inside the body this is the hello world text now instead of this hello world text let me create a box so that we can see animation more clearly so I'm going to use a container and in this container I will give some height let's say 200 and weight 200 and color not child color uh colors. blue fine and I need to remove this Con from here so let's reload it okay now we have this box here now what I want is I just want to animate this box so for that I have to decide like which kind of animations I want so first uh let's say I want this spin animation so for that literally I have to just wrap this container with the widget and that widget will be Spin and for that you need to import this anime package and that's it it's that simple uh okay so let me hot restart it okay now if I will click on go to home yo our animated wiget is ready so as you can see like in a stateless wiget we just wrapped our container with Spin and that's it but imagine if you have to do without using this package then first you need to convert this stateless wiget to stateful wiget then you have to use a mixing here like single trigger provider State mixing you have to create a controller you have to initialize you have to dispose you have to do hell lot of things even for a simple animation like spinning this container so this is that simple and if you want to like make it infinite so here is infinite flag that you can make true so it will keep infinitely spinning yes this is that simple so first I first time when I got to know about this package I even can't believe that it will be that simple but yes it is now let's try some other animation like bounds so what I have to do just replace spin with bounds nothing else so as you can see now our container is bouncing so this container can be anything like like literally any your flutter viset this can be your sized box this can be your text this can be your button so for example let me write here text and uh I am dancing text and as you can see now text is started dancing so I mean any wiget you can use you just need to wrap it with the animated wiget okay let's try some of the other animations like like uh SEC X SEC X and as you can see now it is shaking from X Direction so if you want to customize it like uh you want to change from like from how many distance it should take then here you can see the default value is 20 so let's make it 40 so it will look like more sey so now as you can see it is coming from some more distance and if you want some little sake then you can make it something smaller like 10 so it will just simply shake like this and similarly uh there is Shake y so it will shake from top to bottom so now it is shaking from top to bottom so I mean in this video I will not visit each of the wigets and explain everything so I'm just giving you an idea like literally you can use any of the available widgets here and it is that simple and what is the use case so in any of the application so if you are developing and if you have these kind of nice animations it will uh boost your user experience and user will love your application so it is not that complex it is also performant okay now let's see the customizable properties so as we already explored infinite is available for some of the animated wigets but for some of the animated wigets it is not available we already uh talk about from like uh if you want to customize from how many uh distance it should bounce or come that for that it is from so here let's say if I want it from two up Direction then the default is 75 then I can make it something like 175 then it will come from more top so so you can see here now it is coming from more top and if you want some little top then you can make it some something smaller like 50 and it is coming from less top Direction so this is the from so if it is in case then it will from Top it will take if it is from uh left or right like here if I will make left then it will from will decide the left Direction from where it is starting so the initial or Final Destination if you want to slide or feed more striking and child is will be the vget that we want to animate the as simple as that duration will be the like uh how many till how many time it should animate so for example I want this bounce animation to happen for some duration let's say what is the default value default is 1 second like th000 millisecond so I want it to be duration I want it to be some more quicker so I can say milliseconds and just 600 so if you want to make it fast then you can give duration some less so as you can see in instantly it came and if you want it to be more slow then you can give something big here like 3 second and let's see so as you can see it is coming slowly slowly and bouncing this is the duration and delay is the delay before the animation so if you want animation to start after some time let's say I want this animation to start after 3 second then I can give here duration of second three so now if I will go back and come here it will animate after 3 second and uh from we already discussed animate so if I will write here like animate and by default it is true like it should animate but let's say you don't want to animate it on anyal render instead you want to control like when it should animate so for that you need to create a state variable or you if you're using any State Management uh solution like provider block then uh with the help of that you can change this flag so for example if I will write here false then it will not any uh animate on initial render so as you can see it is not animating but if I will write here true then it will animate and to make it more clear let's use some other animation like Spin and animate is true and let's make it infinite true okay so it is spinning but if I will make this animate to false it will not spin so if I will go back come here it will stay but at some user interaction or some condition if you want to start spinning this then you can use this flag animate and make it true from the state variable or from anywhere where you are storing this flag so this was the animate and infinite we already discussed like uh if you want this wiet to infinitely animate then we can use infinite flag to true so it will keep animating manual trigger if you are going to trigger the animation manually require the controller property so this is kind of this animate but if you're using some controller to an animate and animation controller then you can use this controllers function that the controller Advance use cases for majority but don't need this so if you're using some animation controller and all but generally we do need this on finish function that is called when the animation finishes with argument forward or backward so for example let's say on this spin animation on finish and it will give us Direction I will just simply print uh Direction dot uh name so once this animation will finish it will print forward once this animation is finished we can uh do something within this on finish call back and if you want direction that we can also use and curve is the animation curve that is available within flutter like uh let me use some other animated vet for that curve thing fed in left slide in left will be good slide in left yes so here slide in left don't need I remove this on finish Okay so as you can see it is sliding in left but what if I want this animation curve to be not linear or something elastic or something else then for that I can use this curve and then this curve you can see in flutter bunch of Animation curves are available so for example let's say I want Bound in curve so how it will look let's see it is loading is not giving the chart okay let's see this bounce [Music] in so as you can see initially it bounced and then came to this position so this is is the curve that you can customize if I will make it like [Music] uh e out then you can see little difference you can notice if you know about curves then you can definitely notice so let's say is in back or bounce out then instead of initially bouncing uh it will bounce at the end so yes you can notice the some changes so this is the uh curve thing that you can customize so that was all about anime do flatter package that is the easiest way to animate any of your flutter vet I believe this video will be very helpful for you and feel free to like And subscribe

Channel: TDevelopers

Views: 137

Keywords: flutter, animations, flutter animation, flutter widget, flutter animation for beginners, flutter animation tutorial, animate do flutter, flutter for beginners, awesome flutter packages

Id: r0JsxjYR4zA

Length: 14min 3sec (843 seconds)

Published: Mon Jun 10 2024