Flutter Animation Tutorial - Understand the Basics & Animate with Ease

apps are boring of course only until you add good-looking animations into them since flutter renders everything to the screen itself without relying on those pesky native views you can animate literally everything as they say though with great power comes great confusion in this tutorial we'll dispel this Fox around in custom animations and you will finally gain clarity in this matter [Music] welcome to resew coder where you are getting prepared for real app development by building better faster more stable apps so subscribe and hit the bell if you want to grow your flutter coding skills in this tutorial we are going to do a deep dive into animation in flatter and we are going to have an app looking like this by the end of this tutorial so it will animate a logo of reso coder with bouncing animation and it's all going to be done in the most basic manner and then later on in the next part of this tutorial we're going to refactor that the most basic code together into something more clean but before you can even think about refactoring something you first have to understand the essence in-depth and that's what this tutorial will be about and be sure to check out the written tutorial from the link in the description where you can also find all of the code written in this video and go through it at your own pace so much of the aforementioned confusion stems from the fact that there are many ways to do the same thing in animation you can either repeatedly call set state in a stateful widget you can extend animated widget and you can even use animated builders so what's up with these three seemingly different things which still just perform one thing which is animation in flatter well in this first part as I already said we are gonna take a look at the most basic option and that is set state in a stateful regular widget no animated which is no animated builder nothing like that we first have to understand the basics let's first get rid this default app you can of course get all of this code from the link in the video description there is the whole project available and we're going to create an animation page outside of main dot dart let's create a new file and call it basic animation page it's gonna be a simple stateful widget which will be called animation page let's import material of course and what do we want to do here well we of course want to rotate this reso coder logo and I have added the reso coder dot PNG as an asset you do not need to do that you can just use your own assets you can use whatever you like you can even rotate a regular widget which is not an image but in essence what we want to have in this build method is something which will be able to rotate even without animation so let's first build the basic UI which cannot be animated and then I'm going to explain what animation actually is in flour and that you may be mistaken about the actual essence of animation when it comes to flutter so this should now return a container it will rather return a scaffold because we are in a page we want to look at we're gonna make it look nice so written scaffold and this scaffold will have a body or a bar will now be present but a body will be present and this body has to be able to rotate and to rotate something in Flour we can use a handy transform widget and use the rotate Factory I guess and we can specify an angle here and this angle will for now be hard-coded so for example 0 which is no rotation and then it's child will be a container which will hold a child which will be the image asset of reso coders so adsense reso coder you can use any kind of a widget here which you want to rotate of course and then this container just to make it look nice we're gonna make it aligned to the center so alignment and not specify the values directly but climb and that Center and finally it's gonna have a padding of catch means it's all thirty all right so now when we take a look at this this will be basically a regular UI once we import the animation page into main da dart so it will look like a regular UI without any kind of an animation alright here we go we have the app running nothing is animated but when you think about it more deeply flattered is built for animation because very much like a game engine its UI can be refreshed multiple times per second and actually we do not even need to do some fancy animation in code if we wanted to animate this logo ourselves we could of course when I'm going to click here the emulator will disappear but if I input a value of something like zero point five here and open up the emulator again the logo will be rotated automatically right if I input something like zero point seven it's gonna be rotated even more if I input something like three the rotation will be something different so we can animate this UI even ourselves by hand without using any kind of fancy code by just changing the angle of the transform and this is precisely what we are going to do with the animation and of course to change something programmatically in the UI and to make the built function run again we have to call set state from within the state fall or the state class of the stateful widget so now the only question remains how can we change the rotation value in a way that provides a smooth animation that it's done programmatically and that we do not have to write the angle here ourselves by hand well that's what the animation in flower is for and that's where you might have some kind of a confusion when it comes to flutters animation because at least for me when I think about animation I think of things moving on the screen things jumping and so on like Disney movie right but unflattering completely different animation is just nicely generated interpolated values multiple times per second animation does not move anything itself animation just generates some values which can then be used inside the UI so we would do something like some changing value here and of course when this changing value changes and we call set state the build method will be rerun and the angle will be different so that's what animation is in Flour is just changing values alright now that you know the essence of animation in flutter let's jump in and let's do something useful about it every custom animation has to have an animation controller so we're going to create a field in this animation page state of type animation controller called an 'm controller and we are going to initialize it where else than in the init state method so we're going to just say that anime controller should be equal to animation controller a new instance of it and what does it take in well it has to take in a duration which is the duration of the animation which is going to perform how long it should generate numbers basically and in this case we want to have the duration to be 5 seconds and an animation controller will generate values of 0 to 1 in the specified time span of 5 seconds once we start out the animation but another important parameter of animation controllers constructor he is vsync which is actually required and what is missing well we have to tell this control or how many times per second it should progress the word the final value you know screens can have refresh rates of 60 frames per second or maybe even 90 if you are using some one plus seven Pro at the time of recording this video this is probably the only phone which supports 90 fps and to keep the animations smooth every single time that the screen refreshes a new frame or a new value in this case has to be generated so that the UI can be updated either 60 or 90 or even 120 times per second if you have a beefy phone in the future and to let animation controller know when precisely it should generate values we're going to use a special thicker mixin and it's a common case to use this mixin on the widget containing this animation controller so in this case we're going to use this mixin on the animation page state and if you want to learn more about mixings in general definitely check out the video from the cart in the corner we're going to use single ticker providers state mixing which is optimized if you have just one animation controller but as it writes in the documentation if you have multiple animation controllers in a widget you should use a ticker provider state mixing and not a single ticker provider state mixing but in our case we can use this one because we have just one animation controller over here and now what we can do is to specify vsync and set it to this because this is now also a single ticker provider state mixing and actually let's even right now start out the animation even though it's not going to do anything useful just yet because we are not like changing anything in the UI but still we can start out the animation by calling forward on the animation controller so this will make it go from 0 to 1 in the specified time span of five seconds of course also it's extremely important that you do not forget to dispose of the animation controller to prevent any memory leaks and actually it's going to throw a bunch of exceptions on you if you do not do this properly so we have to go somewhere I like to do it below the build method because it doesn't clutter up the code as much so we're going to create a dispose method here and before calling super dispose we have to call and in controller that this pose this is extremely important definitely do not forget to do this we currently have only an animation controller but to use the values of an animation inside the UI for the angle we have to have an animation of double so it's actually a type animation is a type so it's going to be animation double and it's gonna be called animation and then every animation exposes its current value so we can use it inside the angle parameter of the transform so animation that value and as the animation value changes and we call set state the angle will change of course currently this animations value will not change because the animation field is not even initialized yet but we are going to get to it later so how can we connect this animation with the animation controller and what's actually going on in here well let's first talk about the animation controller a bit more because it is actually itself a subclass of animation yes even animation controller can be used directly inside the transforms rotate Factory so we can instead of an animation specific the anime controller and get its value here and it should actually work just fine but we probably do not want to do that because remember that animation controller by default generates values from zero lower bound to one and we want to have values of something different here definitely not zero to one because we want to make it a full circle and zero to one is not a full circle in radians because full circle is zero to two times pi radians right if you know something about these values from trigonometry or somewhere else so if we open up the definition of animation controller we can see that it extends animation double that's why we can use it directly as an animation but we do not want to do that because we want to modify the range of the values and we are now going to modify the range of the generated values directly on the animation controller instead we are going to use a to win for that because tweens make it possible to either change the range from let's say 0 to 500 or minus 200 to plus thousand it doesn't really matter and they can also change the range to be of a different type than double you can just as well have a range of colors or a range of text styles which are changing into one another so really there is a lot which the tween can do right out of the box so let's set this animation which we have just created this field here below setting the Anam controller in in its state and let's set it to be a tween in our case we are going to make it a twin double and of course you can make it something else because flutter supports even color tween and textile tween and many other tweens which you can learn more about from the documentation but we just want to have a simple tween double and then it takes in a beginning in our case it's still going to be 0 but end will be 2 pi and we have to import the a package from dart standard library so math Dartmouth and end will be math or actually two times math dot pi because it's a good practice to import it as math so now we can use it as math that PI but this returns and animatable or actually a tween which is an animatable but we do not want to have an animatable we instead when i have an animation and to perform an animation we're going to call animate and then specify the parent which in this case will be anima controller so what's actually going on here because this may be confusing to some people and I don't blame you it's been confusing to me well this tween will change the range of the animation which currently is running from 0 to 1 to 0 to 2pi which is like 6.18 something and it's going to do that completely automatically because it knows that for example if the enemy controller is currently at 0.5 that it's in the half of the animation and it's going to automatically just generate PI value so 3.14 because that's the middle of its own range right it's going to transform the range to its own so now what we can do is to go down here and change the rotation or the angle of the transform to come from animation devalue and then all that's left to do is to actually call set state every single time that a new value is generated by the tween or even by the enemy controller but we can do it directly on the tween itself so every animation exposes a listener and we can add a listener here with cascade operator and this listener will do nothing else it will do nothing fancy except for calling empty set state we're now going to input anything into this set State and that's for a simple reason it is because the updated value is already present in the animation field we do not have to set anything in sets day because it's already set the set state now has only one function and that is to cause the rebuilding of the UI by calling repeatedly the build method this is one of the things which we are going to refactor in the next part so definitely subscribe also hit the bell if you do not want to miss it what this means now is that if we open up the emulator and actually we will have to perform a hot restart so ctrl shift f5 I hope so yeah so now it's animating right but it's kind of a boring animation it doesn't have any bouncing ends or anything like that and also it stops after just one time of it being rotated so let's see it once more sure it animates again but again it will stop once the animation finishes this happens because we are calling only an 'm controller dot forward which performs the forward animation by making the anning controller generate values from 0 to 1 but we can also make it generate values from 1 to 0 so it will go back and this is possible by making it call not forward but reverse we can make this animation loop infinitely by using another kind of a listener and that is status listener so let's add status listener and this will take a status here which is an enumerated type and it can be either dismissed so it's stopped at the beginning forward which is animating in forward direction complete it which is stopped at the end and reverse what interests us in particular is the animations that is done completed because it's something like that happens so status is equal to animation status dot completed this means that the animation finished and the and and in that case we wanna call an 'm controller that reverse because we want to make the animation run backwards but otherwise so else if the status is animations that is that dismissed which simply even though it says dismissed it just means that it's stopped at the beginning of the animation so the annum controller is at the value 0 then we wanna again perform the forward animation so we're going to call an in controller that forward and still we have to call an in controller that forward even outside of the status listener because otherwise the first animation will not start and the status listener will not be called so it will be just stationary if we now refresh the UI by doing hard restart and wait for a while we will see that actually it starts animating backwards and forwards and it's gonna do that infinitely but as you can see all of the animations are a linear by default and this means that their speed is constant no matter at which stage of the animation they are in so if they are at the beginning or at the end they are still animated and the same speed but we can change this by adding curves to the animation so for example we can make it bounce in and ease out and this is very simple to do in flutter we are going to first define a curved animation right above the tween where we are setting the tween above this we are going to make a final curved animation and it's going to be equal to a new instance of curved animation and this takes in a parent which will be the enemy controller and it actually doesn't have to be a controller because this parent is of type animation double so it can be really any kind of an anime double not just the controller and then also we can set a curve here so this is the forward curve and we want to make it a curve that or curves that bounce in and the reverse curve can be set separately from the forward curve and this will be curves that and let's say is out and then we can animate this tween for rotation not by using an 'm controller anymore but instead we're going to plug in the curved animation in here because this animate again doesn't take in an animation controller it instead takes in an animation double and sure enough our curved animation is animation double if we take a look at it it extends animation double in its definition so what we've done here is a layering or a nesting of animations and this is possible to do basically an infinite amount of times so you can really create some nifty looking animations by just layering them on top of each other like we've done here with this curved animation so now once we refresh the UI or HUD restore it and go here we can see that it's bouncing bouncing and the start and then it just eases out and starts bouncing again once it bounces completely again it eases out and it will do this infinitely I'm just gonna show you another approach of adding curves to the animation and just know that this is really useful especially if you want to have different curves for the forward animation and for the reverse animation but if this is not needed you can do something it's not really even simpler but it's just a different way of adding curves and that is if we actually comment this out we can use another tween which will be a special type of tween called curve tween and we can change multiple tweens together by calling chain on a tween so we're gonna call chain and we're gonna chain curve tween our curve tween and this takes in only a single curve which we will set two curves bounce in and then we are going to pass again the animation controller itself because we no longer have and curved animation here so once we do that and now we refresh the UI by hard restoring the curves will be identical for forward and backward the animation but we've added them in a different way by using a tween and not by using a curved animation so if you just want to have the same curves all the time this is another option how to do this but I actually like the previous version much better so I'm which is going to hit control Z a bunch of times so that we again have a nice curved animation with different curves at the beginning and at the end in this tutorial you gain an understanding of animations in floral you now know how to create fully fledged animations using the classes which flutter provides the code which we have currently though is quite messy and a little separation of concerns will surely help the code reuse and also with readability and so in the next part you will learn how to use the animated widget and animated builder to refactor your animations so that you can actually even unentangled the animation from the UI itself because currently we are somehow joining the animation with the UI because we are hard coding the animation value inside here this UI would not work if the animation was not present so you're gonna learn how to separate out your code so that you can reuse the animation multiple times on multiple different widgets and if you do not want to miss this next tutorial and also many more tutorials on flutter and dart definitely subscribe to this channel and also joined a notification squad by hitting the bell button to make sure you grow your flutter coding skills because here an reso coder I am determined to provide you with the best app development tutorials and resources out there if this video helps you to understand animations more in depth definitely give it a like and also share it with other developers who will surely benefit from this follow me on Instagram I go under the name reso coder everywhere leave a comment if you have any suggestions or questions or anything else to say and see you in the next [Music]

Channel: Reso Coder

Views: 57,157

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter tutorial, flutter animation, flutter sdk, flutter animation tutorial, flutter animated builder, flutter animated widget

Id: txLvvlooT20

Length: 27min 31sec (1651 seconds)

Published: Thu Aug 01 2019