Flutter Animation Tutorial #2 - Built-in Animations

all right then gang so the first thing to understand is that there's many many different ways to create animations in flutter and to be honest at first it can be quite confusing because they throw out you a lot of different built-in widgets custom widgets that we can create animation controllers all of that jazz and sometimes you don't know which way to turn because there's so much that they give you and also there's more than one way to create the same type of animation now broadly speaking there's two different types of animations in flutter we have explicit animations which give us more control over the animation using what's known as an animation controller but they're generally a bit more complex to set up and we also have implicit animations now they give us less control over the animation but typically they're easier to set up by using built-in or custom animated widgets now which one of these two options that you use really depends on the animation you're trying to make and also how you prefer to code and structure your code but generally if the animation repeats over and over and over without stopping or requires granular control we'd use an explicit animation with an animation controller to create that otherwise we'd probably use an implicit animation now this is a generalization and there might be times when this doesn't apply so in this series we're going to be looking at both types of animations but to begin with we're going to be looking at the simplest of the two implicit animations now in flutter we can either make our own custom implicit animations or just use some built-in implicit animation widgets that float it provides us with so to begin with we'll try out some of the built-in ones and then later on maybe in the next lesson we'll make our own custom implicit animation as well okay then my friends so to demonstrate these different animated widgets these different built-in animated widgets that flutter gives us i've created a sandbox file inside the screens folder so i'm just going to create a new stateful widget inside here called doom sandbox and i also need to import at the top the flutter material package so it's this one right here flutter forward slash material dot dot okay now i want to register this as the home screen so we can see over here as we work so to do that i'm going to go to main and replace the home widget in the home property with the sandbox widget and if i select that it automatically imports it for me at the top so if i save this we should see the black screen over there because we don't have any content inside this widget so let us now flesh this out so instead of a container i'm going to return instead is scaffold and inside that scaffold we need oops make sure you spell this correctly it's double f o ld and inside that scaffold we need a body property and what i'm going to do is place an animated widget as the body now to begin with we'll use an animated container like so now basically flutter gives us animated versions of the widgets that we already use so we can already use a container if we want an animated container we use the animated container widget and then we can animate the properties inside that widget we'd have one for padding which is animated padding opacity would be animated opacity so all of these widgets that we have out of the box we have animated versions of them as well now not every widget has an animated version there is a limit and you can find out all of those on the flutter documentation but there are quite a few so in this case we're saying we want to animate the properties inside a container by using the animated container widgets all right so then inside the animated container i'm going to have a few different properties so i'm going to have a margin and this is going to be using edge insets and i'm going to say dot all so it's all the way around and let's give that a value of 20. now if i wanted to i could instead and don't worry about this for a minute that's because we don't have some of the properties that we need inside this animated container specified yet but we will do those shortly if i wanted to i could use a variable to dictate what this value is so i could say up here that i want a variable which is a double and i'll call this underscore margin and underscore is just a naming convention for this variable and it means we're only going to use this variable inside this file and i'm going to set that equal to 20. so we're giving this a value of 20 and now we can output the margin right here so that would work the same way right and we can do the same for different things as well so what i'm going to do is actually just paste in a few different variables right here so we have one for opacity which is one one for margin which i'm going to set to be zero initially we'll animate it to a different value later on one for width which is starting at 200 and one for the color which is colors dot blue okay so these three are doubles the final one is of type color so what i can do down here is say we also want a width property of this container which is going to be underscore width right and also we want a color which is going to be underscore color like so now like i said at the minute we're getting this error over here and if we hover over animated container it says that we're missing the duration parameter so basically we're going to be animating these different values right now this widget right here wants to know how long it's going to take for us to animate those so over what duration do you want to animate them so we need to pass in a duration parameter right here and this is going to be a duration object so duration and then inside here we can specify seconds or milliseconds so i'm going to specify milliseconds and set this to be equal to 900 or if you wanted to you could say seconds and we could specify one and that's pretty much the same okay so let us now save this and if we refresh there's no animation yet nothing's been animated we just see this container right here with these different values we have a margin of zero so we don't see any margin but if we change this to something like 20 then we should see over here imagine if we refresh let me do that because we've changed the state we see that margin i'm going to return that back to zero and also we see that the width is about 200 pixels we see that the color is blue as well now we want to animate these different values so they start as these things and by the way we'll come to opacity later but they start as these values but we want to animate them to maybe something else so what i'm going to do is place a few buttons inside this container and when we click on those different buttons it's going to animate these different values okay so then inside this container we can have a child property so that child property is going to be a column of widgets and inside here we need some children widgets so i'm going to place them in and these children are going to be buttons now before we do that let me move this onto the next line i'm also let me move this down as well i'm also going to give this a property cross axis alignment just to specify how they're going to align in the cross axis because i want them to be in the center so i'm going to say cross axis alignment and choose center now that's not important to the animation that's just so it looks a little bit nicer on the screen so these children like i said are all going to be buttons and they're going to be raised buttons so race button first of all and the first one inside is going to have a child which is a text widget and this is just going to say animate margin so we're going to click on this to animate the margin value over here all right so we also need in this an unpressed handler and this is going to be a function whereby inside we set the state because we're going to change one of the values and inside that we pass a function whereby we update the margin and i'm going to set that to be 50. okay so what we're seeing here is when we click on this button we're going to set the state and update this margin value to be 50. now because we're inside an animated container and we're using this value right here it's going to animate automatically for us from the initial value to this value if this was just a container without the animated part there then it wouldn't do that transition it wouldn't animate from a to b it would just quickly go from a to b but now it's going to animate from a to b all right so let me save this first of all and we can see this button right here animate margin i'm going to click on that and we can see it animates that margin in awesome okay then so next let's do another button and i'm just going to copy this and paste it down below and this time we'll say animate and instead of margin we'll say color and here we don't want to update the margin we want to update the color and i'm going to set it equal to colors dot purple so we're going to go from blue to purple and we're going to animate there so if i save that now and come over here animate color and we can see we animate to purple it doesn't just click and go to purple it animates it transitions it and this happens across one second if we were to change this to something like five seconds it would take a much longer time i just need to refresh to catch the changes in the state so we can animate again if i try to animate color now then it's going to take a much longer time five seconds in total to animate to purple and same for the margin now that's a bit slow so i'm gonna go back to one second and save and refresh and now i'm gonna create a third button and come down here and this time i'm gonna say animate and what do we have left we have margin width let's do the width animate width right here and this time we want to update the width variable and instead of being a color we'll change this to 400 so it's going to go from 200 in width to 400 so let me save that and animate the width and now we can see the width change as well awesome so that's just animated container and like i said there's other animated widgets as well now one of those other animated widgets is animated opacity we can't have an opacity property inside a container if i try to do this we're going to get an error right so you'll see right here we hover over the name parameter opacity isn't defined we can't use that inside a container but we can't use an opacity widget to have an opacity and if we want to animate the opacity we can use an animated opacity widget so i'm going to keep this inside the column of widgets right here so underneath this button i'm now going to create an animated opacity widget which is another built-in animation widget so animated opacity like so and then inside here we need a duration again so any kind of animated widget that's built into flutter we need the duration property so the duration is going to be duration and then we'll say seconds and it's going to be two seconds this time so it's going to take two seconds to animate from this value to whatever value we give it okay so down here we're going to say that the opacity property is opacity which is this variable right here and then we also need a child so we can actually fade something in and out and that child is just going to be a text widget and the text is going to say hide me so let me just enter onto a new line and say hide me and then also i'm going to give this a style property which is a text style and oops let me spell this correctly text style and then the color of this is going to be white so i'll say colors dot white all right so if i save this at the minute then we see this thing right here but we can't animate it yet we don't have a button for that so let me now create another button and i'll do it above the opacity widget right here so again i'll copy this and paste it down here like so and here we'll say animate opacity and then right here we want to update the opacity variable and set that equal to zero so it's gonna go from one which means it's fully visible to zero which means it's invisible all right so if i save this and click on this we should see this hide me fade out over two seconds click on it and voila so if you want to see some of the other built-in animation widgets in flute you can come to the flutter documentation on this page and i'll leave a link to this down below and if we scroll down we can see right here we've used animated container and also animated opacity but we also have other built-in animated widgets like animated positioned animated size etc so you can definitely check these out and have a play around with these some of them do work slightly differently from one another but if you click on one of these it is normally going to give you some information about how to use it but next up we're going to look at how to make custom implicit animations using the tween animation builder

Channel: Net Ninja

Views: 64,910

Keywords: flutter, flutter tutorial, flutter animations, flutter animation, flutter animations tutorial, tutorial, animation, app animation, flutter animation tutorial, animation tutorial, flutter custom animations, buil-in animation, animated widgets, animatedopacity, aiatedcontainer, animated opacity, aimated container

Id: sZw8opj38Vo

Length: 14min 12sec (852 seconds)

Published: Mon Aug 03 2020