Tween Animations

In this section, we're going to cover animation and flutter animation and flutter is both equal parts awesome and frustrating and you'll see why. First thing we need to do here is let's actually import the animation package. Then we need to use a mix and down in our state, so let's go down to our state and let's say with single. Ticker provider, state mixin longest name in the history of names, so what have we really done so far? Well, not a whole lot, but we're now we're using all the back and code. And this is the beauty of flutter. And this is why I love flutter packages. I should say dart packages, all that code. Very simple, very easy to reuse. We just add a few lines and bang, we're done. So we want to make an animation, notice how that is a typed class. So we're going to say double. And let's call this. Animation, now we need an animation controller. And let's call this controller. Before we go any further, I want to really explain what these two things are, because you're probably looking at them going, OK, it's great that we have them, but I have no idea what they do. Animations typically have a sequence of numbers or a a list of numbers that you're going to modify over time. The animation itself is that sequence of numbers or I should say the individual number that changes over time. The animation controller is the time in which that sequence is changed sounds a little confusing and it kind of is under the hood. That's not exactly what's happening, but it's pretty close. So we're going to Imette St.. There we go and to say super in it state. Controller Equal knew, and we want a new animation controller. Now, in here, we sink, we want to say this, meaning this current widget, and we need to give it a duration. Now we've got our duration and say milliseconds, notice how you can also do microseconds in minutes. I usually stick with milliseconds because you're just going to drain that battery if you do microseconds. And to be honest, some animations just aren't going to keep up. So I will do milliseconds and let's just do this over 5000, which is actually five seconds. So if you don't know what a millisecond is, every thousand milliseconds is one actual second. So there's our controller, what we're really saying is the controller is going to last or I should say the sequence of numbers is going to change over five seconds. And what we're going to be drawing on is this current object. That's not exactly accurate, but you kind of get the point now, we need to make our animations sort of say animation equal and we want a new tween. Tween is an interesting class tween, actually a shorthand for in between. So we want a beginning and an ending, so begin. We want to do zero point zero and we want to say four hundred point zero. So the animation itself is between or tween those two numbers. Now we want to animate and we have to give it a controller. Now, we should really add a listener. We got a listener in here, and let's just grab this. And I'm just going to comment this, we're not really going to use this code. I just wanted to show you that you can do it. You can actually set the state of other things based on when the animation state changes that way, if you wanted to know, hey, at number 255, do something special like make an explosion or something, that is how you would actually do that. You just simply add a listener to your animation and then track its current state. All right. So we've got those two things in there. What we want to do next is actually. Override, dispose. And let's disposer controller. If we don't suppose that controller, what might possibly happen is we call to close our application and the animation's controllers still running in the background, sucking up the battery, and it appears as if your application is hung up. And, of course, you get some pretty bad scores. Let's jump back up here. We want to actually start that animation. So we're going to say forward. Now we need to actually add in something to animate, let's grab our container, we're going to leave the padding, but we've got all this child stuff in here. Let's go ahead and get rid of that. So we've got a center and or is this column at right here? Let's get rid of this and we'll say new. And we want to add a flutter logo with a size of 300. Now, a container, we're going to have to do a little bit of work here, we're going to say height equals and we want the animation value. And let's do with it was the animation value. Let's go and flip over to our emulator and it's time running. Let's run. This bad boy may take a second to build this. So while it's building, what's really going to happen when we in this state is we're making our controller, which is going to determine the sequence of numbers and then we're making our team and you can see the animation starting up there. The queen is from zero to 400, let's restart this whole thing so we can see that animation again, flip over real quick. So it grows and it keeps going. Now it hits the edges and it appears to just move down because it can't move any further. That's the width and height. We can change that around. Let's actually do this by like two hundred. Cut that in half. And you can see the animation itself has fundamentally changed.