Flutter Animation Tutorial #3 - Tween Animation Builder

all right then gang so occasionally you're going to want to animate something in a way that requires a tiny bit more control than just using a built-in implicit animated widget for example i might want to animate two or three different properties all at once for example the padding the opacity and the position and set specific start and end points for the animation now to do this we could take several different approaches but i'm going to show you one of those and that is by using the tween animation builder widget so tween animation builders are a way for us to create custom implicit animations and they allow us to define our own tweens with custom start and end points now the job of a tween is to map steps between a start and end value so we can use a tween to describe what values should be interpolated from a to b for example we could have a tween that starts at zero and ends at three we could then use that and the changing values that we get back from that tween to animate different properties like a padding property from zero to three pixels or something like that so let's start with an example and i'll explain more as we go along so then the first thing i've already done is i've replaced this to home instead of sandbox and since we're not going to use this anymore i'm going to delete sandbox.dart as well because now we're going to actually work on our project so i'd like to animate this title at the top onto the screen when it first loads and i want it to fade in so it's going to be completely invisible to begin with then it will fade in but also travel down a few pixels too so to do that we're going to animate two different properties the padding probably at the top and also the opacity i also want this animation to start automatically when we first load the app so i don't want to have to click a button to trigger the animation like we did in the last video so i'm going to use this time instead of some built-in implicit animations something called a tween animation builder and that allows us to build our own animations using a custom tween and a custom duration and all that kind of jazz so let's first of all go over to screen title that's where we're outputting this text widget right here ninja trips and it's just this text which we take in ninja trips and also it has a text style so the first thing we're going to do is surround this with a tween animation builder widget so i'm going to click on this context menu and go to surround or wrap with a widget if i can there it is wrap with widget okay and this is gonna be called tween animation builder okay so we can keep the child property because we're gonna use this child later on ultimately this is what we're going to be outputting over here right but we also need some other properties inside this tween animation builder first of all like always we need a duration so i'm going to say the duration will be a duration object and it's going to be milliseconds and this is going to be about 500 milliseconds so half a second now also we need a builder and this is a function which we use to actually return a widget tree and inside here we can animate different values so inside this function we take in a build context which is the context that we have right here okay so we're taking that in and secondly we need another argument and we'll come back to this in a second so i'm just going to use underscore for now and then thirdly we need another value which again i'm going to come back to later on so inside this thing right here this is where we're going to return some kind of widget tree now what i'm going to do is return opacity first of all and this isn't animated opacity anymore we don't need to use that built-in widget because we're using the animation builder and we're controlling the animation a little bit ourselves so inside this opacity widget i'm going to specify an opacity value so opacity and we'll come to the value of this later on for now i'm going to use underscore and we'll fill that in later on we're also going to have a child property and that child property is going to be this thing right here so this third argument allows us to pass in a child which isn't dependent on the animation itself we're not animating anything inside of this text widget right so we don't need to rebuild that every time our animation value changes so we can define that up here and then this third argument is going to be of type widget and it's the child that we want to place down here so the child is going to be this thing and it automatically looks for this child okay so i'm saying basically i want to take all of this stuff right here and place it here so we have this surrounded now by an opacity widget and this opacity needs a value so this is where our tween comes into play what value do we want to output for the opacity well we want to start at zero and we want to finish at one so we need to make a tween that is gonna go from zero to one and interpolate values from those two positions so we need a tween property right here and that is gonna be of type tween and we're gonna say that this is gonna return a double and that double is gonna begin at zero and it's gonna end at 1. so now we have a tween which is going to give us values between 0 and 1 over a duration of 500 milliseconds so make sure your comment is on the outside of that not the inside now inside the builder we can take in this argument right here and this argument is going to be whatever value over the duration that we get and that value is obviously going to change over time between 0 and 1. so this is a double right here because we specified it to double so let's now say double and i'm going to call this val you don't have to call it val you can call it whatever you want and now this opacity is going to be underscore val so it's going to begin at zero and then it's going to end at one and at the moment we have this error and that's because i've forgotten my colon and we also need a semicolon at the end of this return statement as well so now if we preview this then we should see this fade this text from zero to one or rather fade in so now if i save this and refresh we should see over here this fade in at the top of one second awesome that works cool so that's us just using one value right here for the opacity what if we also want to animate the padding at the top well instead of this child being the child right here that we pass in this thing we could say the child is actually going to be a padding widget right and inside the padding widget we need to specify a value for padding and this is going to be edge insets and that's going to be only at the top so edge insets dots only and we'll specify the top value is going to be underscore val now at the minute that's going to basically give us a padding from zero to one pixel at the top and that's not much it's not noticeable at all so i'm going to take this value and i'm going to times it by 20. so when it gives us zero it's going to be zero when it gives us one it's going to be 20. so it's going to animate between 0 and 20 pixels padding all right so this also needs a child property and that will be the child that we pass it so now if i save this we can see if i refresh it's going to fade in but also come from the top to the bottom like that and that's a nice little effect so then my friends that is a tween animation builder it allows us to create custom tweens like this and by the way this could be any value it could go from zero to ten in this case it doesn't make sense because we don't want opacity of 10 but it could do that if you wanted it to and also it could be other types as well this could be a color tween and it could go from red to blue or whatever you want next up we're going to look at another built-in animation type and that is a hero animation

Channel: Net Ninja

Views: 51,350

Keywords: flutter, flutter tutorial, flutter animations, flutter animation, flutter animations tutorial, tutorial, animation, app animation, flutter animation tutorial, animation tutorial, flutter custom animations, tween, tween animation builder, animation builder, AnimatedBuilder, TweenAnimationBuilder, flutter tween, flutter custom tween

Id: G5fEzO2PprM

Length: 8min 26sec (506 seconds)

Published: Tue Aug 04 2020