Flutter Animation in 5 Minutes

if you're watching this video then you're lazy just like me luckily flutter has you covered just drop in an animated food widget and you're basically set there aren't a whole bunch of them animate the container is the body of them all so let's see what it can do first we will spice up a regular container give it a size and a color and make it look to the camera already then change the container to be an animated container and then we need to give it a duration it can be hours or milliseconds or whatever you want next we need to change our widget to be a stateful widget and then extract the properties of the animated container we want to animate two local variables we'll take the width and the height and make a function that updates these variables and a set state : we'll make some small UI changes and make a button that will call the update step method on press click the button and the animated container does it's magic we can do the same with the color once it spice it up even more then change the animations curve the curve defines the rights of change for the animations value the default curve is a straight line straight lines are boring real men women prefer curves give it a bounce out curve who default curves not good enough they make your own let's take a look at spins between a short for in between it is something that gives you a beginning and an end and then maps that progress over an input range from 0 to 1 will create a basic tween of type double and we'll give it a beginning and an end value now we'll use it to be in animation builder to animate the tween from the beginning to the end give the widget that screen a duration a bowler and then a child we provide a child because we don't want to rebuild the child every time the bolt function is called the bolt function will give you access to the child widgets and the value of the tween as it is animated over the given duration just tell the Builder what to return and there you go here we're returning the child wrapped in a scale to animate the size of the widget you'll note that it's being animation bolder animates as soon as the bold function is called to do another update just change the end value and between animation below we'll call the build function again and update from the old end value to the new end value you can create all kind of different tweens for example a color tween take a look there's also a nice tween fold between sequence that allows you to combine multiple tweens together you are a pro and pros don't need the safety wheel animation widgets pros create their animations from scratch to do all that you need an animation controller the thingy that controls the animation and the animation controller needs a vsync and to get the vsync you'll need to add a single ticket price type mixin to the class definition and provide this type full object as the vsync why don't ask questions we don't have time but it has something to do with the update of the animation and to prevent the animation from using unnecessary off-screen resources a mouthful now give your animation controller a duration and that is it it's created but what is creates it must be destroyed it is important to dispose of the animation controller to avoid those memory leaks next we need some way to be notified when the animation controller changes values we can if we want to add a listener to the animation and then do state updates or whatever when the listener is called but that's a lame way to do it and will result in the entire bulk function being called we are Pro animators and we will use pro widgets make way for animated builder drop that bad boy in in the widget we specify the controller and child widget and they build a function we tell people though we want to return a rotated version of the child so we wrap it in a transformer outside and we specify the angle of the rotation by getting the current value of the controller the Builder function will be called whenever the animation controller changes values one thing left to do start the animation for that will call controller dot forward II buddy look at that let's make it spin forever by changing the forward two repeats listen real talk our time is almost up and there's still a lot of topics left to cover most importantly creating animation objects from tweens and then using those animation objects in transition widgets these animation objects can have their own curves and can also do cool things like create a reverse animation these few transitions are almost like animated food they are already made and only to provide an animated object with these you can easily create some animations that you have better control over and they are also used throughout flutter for example in page transitions if you wanted to you can even create your own unfortunately we don't have time to cover them in dev but luckily I have you covered I've made a complete course on animation in flutter covering everything at a turtle's pace check it out and courses dot fun with dot app you can use the promo code fun for a discount the link is in the description down below if you like this video give it a thumbs up and if you haven't yet remember to subscribe until next time Cheers [Music]

Channel: Fun with Flutter

Views: 176,154

Keywords: Flutter, Flutter Animation, Animation, Tutorial, Flutter Tutotial, Flutter Apps, quick animation, animation fundamentals, couple minutes

Id: q0BBk9gDGT8

Length: 5min 1sec (301 seconds)

Published: Mon Mar 30 2020