Tween Animations

Bryan Cairns
A free video tutorial from Bryan Cairns
Computer Guru
4.4 instructor rating • 15 courses • 139,958 students

Learn more from the full course

Flutter - Advanced Course

Learn to be a Flutter advanced programmer

05:00:07 of on-demand video • Updated February 2019

  • Graphics
  • Animations
  • Mapping
  • Device Integration
  • Permissions
  • Camera
  • Firebase auth
  • Firebase storage
  • Firebase database
English [Auto] 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 mixin down in our state. So let's go down to our state and let's say with single ticket provider state Mixon 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 backend code and this is the beauty of letter and this is why I love flooder packages. I should say d'arte 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 sort of a double analysts 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 image controller is the time at 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 stay there we go and just say super state controller you want. And we want a new animation controller. Now in here Wii sync we want to say this being this current widget and we need to give it a duration. Now we've got our duration and say millisecond knows how you can also do micro-seconds in minutes. I usually stick with milliseconds because you're just going to drain that battery if you do micro-seconds. And to be honest some animations just aren't going to keep up. So Will do milliseconds. And let's just do this over 5000 which is actually five seconds so if you don't for a millisecond is every thousand milliseconds is 1 actual second. So there's our Controller. What we're really saying is the control 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 see 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 0.0 and then we want say four hundred point zero. So the animation itself is between or tweezed those two numbers now we want to animate and we have to give it a controller. Now we should really add a listener and 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 dispose our controller if we don't dispose that controller what might possibly happen is we to close our application and the animations 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. We're going to save 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 in this column at right here. Let's get rid of this and we'll say you know and we want to add a flutter logo with a size of three hundred. Now container we're going to have to do a little bit of work here. We're enough say height equals and we want the animation value. And stay with because the animation de-value is going flip over to our emulator and it's running just run this bad boy may take a second to build this. So while it's building what's really going to happen when we are in that state is we're making our controller which is going to determine the sequence of numbers and that we're making our tween. And you see the animation starting up there the tween is from 0 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's 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 200. Cut that in half and you can see the animation itself is fundamentally changed.