Staggered Animations Made Simple – Flutter Simple Animations Tutorial

flutter has a reputation for allowing developers to build beautiful animated uis and it's rightfully so while you can absolutely build everything with just default flower classes and widgets it sometimes gets way too tedious and time-consuming to do so let's see how to make implementing even the most complex animations a breeze [Music] hello welcome to riso core where we are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you build so subscribe and hit the bell to join us on our quest for becoming in-demand flutter developers in this tutorial we are going to take a look at how to simplify this kind of a staggered animation by using the simple animations package the code which is currently driving this animation is taken from the official flutter documentation about animations so it means it works it looks really nice but the problem is that the default way of creating this kind of a staggered animation is just way too long sometimes it can get unreadable or really badly maintainable and there are certainly ways in which this animation the staggered animation could be improved and that's exactly what we're going to do in this tutorial the fully vanilla default flutter animation code is available in a star project which you can get from the written tutorial which is available in the link in the video description and you should surely check it out because over there in the written tutorial apart from the star project you can also find all of the code written in this video links to the libraries and overall go through this lesson at your own pace the simple animations package has multiple ways to simplify your animations but we are going to take a look at only one of them and that is the timeline tween if you want to learn more about the simple animations package about its other features you can check out its official documentation and the link is available in the written tutorial also just a brief disclaimer as you can see we already have a bunch of animation code pre-written in the star project and i expect you to understand the default way of animating stuff in flutter so if you know how to animate things you're good to go you can follow along with this tutorial but if you don't i'm not gonna explain it here however i do have some prior tutorials of mine in which i have explained the basics of animations in flutter so you should definitely check them out from the cart in the corner and also links to them are in the written tutorial too so what's the issue with the default way of animating in flutter well for one as you can see there is just a lot of animation fields because we are animating opacity with height padding board radius and color of this container contraption which produces this nice animation in the end right it doesn't really matter what we are animating here it more matters uh the way in which we are animating and you can see that the way in which we are animating is just way too long and i would say sort of on the point of becoming unreadable but what's worse than unreadable is the bad maintainability of the current code why because we are doing staggered animations we need to use intervals just as a brief refresher animations run from zero to one the value which the animation controller produces over time basically changes from zero to one by default and if you want to have a staggered animation what you need to do is to create a curved animation with an interval curve and this interval indicates a fraction in which this particular in this case opacity animation will run so opacity will run only from the beginning of the animation to one tenth of the animation because it's 0.1 then the width will be animated only from 0.25 of the original animation from the controller to 0.25 and so on and so forth the problem with this kind of interval definition is that if you let's say wanted to make the opacity last a little longer let's say 0.2 so one-fifth of the whole animation length then if you wanted to maintain the sequence in which the staggered animations are played out you would also need to bump up the start time of the with animation so it would become 0.2 25 and also the end time so it would become 350 and so on and so forth with every single subsequent animation in the staggered animation sequence so basically if you want to change just the initial animation's length in the staggered sequence the opacity you need to also change all of the animations which come after it and this is not good for maintainability and sure we could create some fields like i know maybe double opacity start and say zero then opacity end would be zero 0.1 and so on and create fields for everything and then just say that width would become animated something like opacity opacity start or end whatever plus 0.1 and this would be actually sort of relatively defined because if we change the opacity start the start of the width will change together with it but what have we done by doing this well we have added yet another field so we would again later the code with more fields and more fields equals less maintainability and less readability so we are basically right where we started so we probably do not want to do this the way to solve all of these issues is with the simple animations package so let's go over to popspigamo and let's add it as a dependency over here and together with that we're actually going to add another dependency which is the supercharged package it's in no way necessary to use supercharged a few simple animations but it adds some nice extensions so that we can write less code for specifying durations that's the only reason why we are adding supercharged and also if you want to get all of these dependencies and their versions and just copy them to your project you can get them from the written tutorial so let's briefly go over what we are doing in the default flutter approach for animating staggered animations we first for every single property that we want to animate we create a tween we specify the beginning and end of the tween and we do this whether that twin is a double twin or we are even doing edge instead tween or color twins it doesn't matter we always have a tween first for every single property that we want to animate then we animate or drive this tween with a curved animation which has an interval curve and also we set the parent to the animation controller because there is truly only one animation the one coming from the animation controller which drives all of the staggered animation we just slice that single parent animation up through the use of intervals so that it becomes a staggered animation and then also for each and every property so that it looks more smooth we also set the curve inside the interval curve to be curves dot ease so this easing happens on the fraction of the original animation in this case the ease happens on the 0 to 1 10 of the original animation during the interval but the simple animations package comes with a timeline tween and with the timeline tween we are going to have a single top level tween which will encompass all of the individual tweens this means that we are no longer going to have all of these animations we're going to have just one animation which will encompass the animation for every single property we're basically going to create sort of a container class which will hide the mess from the general code the mess will be hidden so that our code which we use all around the app can remain clean we're going to create a container class of sorts and as if that wasn't enough the timeline tween also has a very nice way of handling relative intervals so this means if we change our mind in the future and we want to make the opacity animation last longer the animations coming after it in the sequence are going to be automatically modified to come after it even though we're not going to touch their code so basically the maintainability of the project will be vastly improved since we'll now have a single timeline tween to accomplish all of the individual property tweens we need to have a way to tell which property the tween belongs to basically we can do this with an enum so let's create an enum all the way up top like this it's going to be called an improvs for animated properties and we are animating well opacity with height padding board radius and color so basically we can say that we have moved the field names of the animation fields into the enum which we have just defined with this enum created we can now delete all of the animation fields because as i've already said now they're going to be concentrated into just one field which will hold a container class for all of the individual animated properties of course this is going to completely break the code but that doesn't matter let's also delete this from here so all of the initializations are going to be deleted just like that and of course the code is broken completely everywhere but for now that's just fine and also if you want to get the code which i have pasted here the enum you can get it from the written tutorial so now we are going to have just a single animation field and its generic parameter will be timeline value value is produced by the timeline tween and it's just simply a container class that's going to contain the values of all of our animated properties so we're going to say a timeline value of an improps and let's call this animation an animation timeline tween handles staggered animations with scenes a scene defines a span of time in which the properties being animated within that scene are going to be updated with new values so a scene is in a way like the interval curve which you could have seen from the default flutter approach but a scene can be used to animate multiple properties not just a single one so this results in uh less code duplication and since we have previously had multiple intervals with different start and end times we're also going to have multiple scenes and let's start with the first one for animating the opacity property so we're going to set the animation field to be equal to timeline tween and it's going to have just an empty constructor and immediately we want to say dot add scene and the first scene will begin at the very beginning so that means zero milliseconds because actually unlike the interval curves scenes taking a duration not just a simple double but even though it's a duration it still behaves more like a fraction of the original animations controller length is just not the double it's the duration but the principle is still the same if you change the duration of the animation controller's animation to for example be twice as long so 4 000 milliseconds the scenes will be automatically prolonged as well so that's not an issue but anyway we want to say zero milliseconds to be the beginning so we could do duration and zero milliseconds but actually we're going to use the supercharged package so because uh unfortunately uh extensions are still not be able to be auto imported as of now i think we should import them manually so let's say supercharged and we're going to import supercharge.the whole thing here so we can then say zero dot milliseconds and also we set the end time to be 100 that milliseconds we're just copying the previous code over to the timeline tween of doing things but the animation sequence and length will remain the same as with the previous code and also we should set curve to be curves dot ease so that everything remains the same as previously with the default approach all right so with this done we have just added a scene which acts as a interval but now we need to tell what actual properties we want to animate within this scene so we're going to say animate we're going to name the property which should be animated within that scene so that's going to be gotten from an n improps the enum which we have created and improps and over here we want to animate the opacity and then we need to define an a tween just for this opacity and just like previously it's going to be a tween of doubles going between zero and one cool and of course this code is not yet functional but we're actually going to get to it working in the end it's not functional yet because the animate returns a timeline scene but we actually want to somehow turn all of this uh timeline tween definition into an actual animation before we do that though let's talk about the scene which we have just added because if you take a look at it it's defined in absolute terms it has a beginning it has an end it's absolutely defined in milliseconds but i have been talking about relative scenes well actually it's completely fine that the first scene is defined in absolute terms because after all it's the first scene but it's more about the other scenes which come afterwards after the first scene that they should be defined relatively and that's exactly what we are going to do we can do that by calling dot add subsequent scene add subsequent scene is a bit different than just the regular add scene call because this one does not have a beginning and end it has only a duration of the scene and a delay and that's it we are now going to animate the width property and this scene should have a delay from the previous one of 25 milliseconds it should be long so it should have duration of 125 milliseconds and the curve will again be curves ease and then the property which we want to animate in this relatively added scene will be gotten from again the anim props and it will be the width and between between will be beginning at 50 and ending at 150. before we go any further all of the other scenes are going to basically uh look very much the same because you should know that you can actually animate multiple properties on just a single scene so we could for example animate the height or any other property inside of this scene which runs from 25 milliseconds after the previous scene for 125 milliseconds we are able to animate any kind of a property we want within the scene and we can animate in even multiple properties in here but basically the principles remain the same for all of the subsequent code which i'm just going to paste here copied from the written tutorial but what's more important than that is to show you how to actually turn this value timeline scene returned from the animate call into an actual animation with which we can work from the flutter ui and this animation will hold the container class timeline value which contains the values for each and every single one of the animated properties so the way we can turn the returned type from here into the animation object with which we can work from default flutter is by getting the parent which is the timeline tween and then from this timeline tween we want to call animated by and it's animated by the animation controller like this right now we can finally uh also format the code so it's more readable looks good it's good that we can actually chain these calls and create relative scenes but it can also become a bit unreadable what's going on here so there are multiple ways to keep the code more readable as you add more scenes and animate more properties you can split this up into variables and do it like that but you can also remain with the fully chained approach just have method calls without any intermediary variables and you can just simply add comments so i would add that this scene is for opacity only this relative scene is for width only and so on and so forth you would indicate which properties are being animated in which scene but again you can choose the break it out into a variable approach but i think that just having comments makes this much more readable in itself all right now i'm just going to copy and paste the code the rest of the code the rest of the animated properties into here from the written tutorial and save that basically there's nothing new for you to learn from this pasted code because uh we're still doing the same thing actually this should be removed the only thing which we have added here is that we are now animating also the height and padding in a scene so as you can see we are animating two properties inside of the same scene and then we also animate board radius and color but basically there's nothing new to learn from here it's all just add subsequent scene then dot animate we select the property which we want to animate and that's it and also specify the tween for example color tween in this case the last step which we are going to take is that we now need to fix the code which is responsible for rebuilding the ui using the animated builder so the ui using the animated builder is rebuilt in this build animation callback method currently it uses the old way of accessing the animated animation values when we still had multiple animation fields but since we now have only one animation field which holds the container class we now need to access the individual values from that container class so we can do that by saying animation dot value dot get and we want to get the value for anim props dot adding right and we can actually remove this thing over here fully now let's just copy this and we're going to change the calls also for the opacity so we're going to get opacity we want to get width and height so width height and lastly color and it's going to all work just fine so this is color and lastly we have the border radius and after we change this there should be no errors inside of the app yep there are zero errors but just for good measure let's unrestart the app fully so that it's truly fully restarted not just how reloaded and let's open up the emulator and we see an issue so let's actually resolve this issue it's interesting so what has happened well i've done some mistake apparently so let's see inside of in its state what we have done is that i think i have forgotten to say or to tell the timeline tween uh the generic parameter so basically we are having a timeline tween of any props like that right and i think that after i save this and uh actually how restart because we are inside init state and go and open up the emulator we now still have some minor issues in here because we have done or i have done the mistake of defining twins without the decimal point so this is always a good thing to keep in mind that actually you need to put this decimal place after the number because otherwise it's going to think that it's an integer tween and it's not gonna want to be cast it to a double so it's actually it's not great that i've made these mistakes but you should just keep them in mind because they really can happen anytime and you're going to be searching where the error is and actually the error is only in the not including a decimal place afterwards but now once again how it restarts since we are inside in its state and now when we open up the emulator it should all work just fine so let's tap it animates let's tap it again it reverses the animation and it's looking great and that's it for this tutorial to go through it at your own pace once again and to also get all of the code check out the written tutorial available from the link in the video description if you don't want to miss more tutorials like this about animations about simplifying animations like we have done here with the simple animations package and many more flutter topics be sure to subscribe to this channel and also join notification squad by hitting the bell button to make sure you grow your flutter skills because here on riso coder i am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer and if you are serious about becoming a great flutter developer who can build real apps for clients or at a job go to flutter.education link is also in the video description by the way to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best flutter resources delivered weekly right into your inbox if this video helped you give it a like and also share with other developers who are surely going to find it beneficial too leave a comment if you have anything to say and see you in the next [Music] video [Music] you

Channel: Reso Coder

Views: 15,304

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter animation, flutter animation tutorial, flutter staggered animation, flutter staggered animation example, flutter tween, flutter tween animation, flutter simple animation, flutter simple animation package, flutter timeline tween

Id: LB3f6gjbX1g

Length: 28min 57sec (1737 seconds)

Published: Sat Feb 20 2021