Flutter Animation Tutorial #10 - Stagger List Animations

Key Takeaways

all right then gang so currently all of these list items all animate in together when the uploads like this but it would be nice to stagger them so that each one slides in fractionally after the previous one so we can achieve this stagger effect by using futures in darts now remember futures are how darts handles asynchronous code and they're a bit like promises in javascript or typescript if you do need a refresher on asynchronous code in dart and futures i've got a whole video about them here on youtube the link to that is going to be down below so the reason all of these list items are animating in together is that we don't have any delay when we add them to this list and when we insert an item to the current state so we need to somehow create a delay between each time that we do this and we're going to do that by using futures so what i'm going to do is first of all cut this like so and i'm going to paste it outside here just so i can cut it later on and paste it back inside here when we need it but now i'm going to implement a future inside this for each so that we can wait between each of these being added in these two cases by something like half a second or maybe even just 100 milliseconds to get that delay now before i do that i'm going to create a new future so to do that i can just say future and i'll call this ft but you can call it what you want is equal to a future like so and then pass in a function inside this okay so basically this is a blank future and at some point it would resolve and we could tack on a then method to it just like we can a promise so what i'm gonna do inside this for each loop is every time we iterate through another trip i'm gonna say that the future will be updated to a new value and i'm going to take the current value of future which remember starts as a blank future and then tack on a then method now this will resolve pretty much straight away and fire this the first time around but inside here we can fire now oops fire a function so inside this function i want to return another future so i'll return future dot delayed and this is how we create a delay with futures and then inside i'm going to pass through a duration and this is going to be how long we delay each one of the items coming in so we'll do 100 milliseconds so milliseconds is going to be 100 so this method right here delayed takes in two arguments the first is the delay the second one is a callback function which we fire when we've waited for this 100 milliseconds so at this point that's when i want to do this thing right here so let me cut that again oops and let me cross that error off paste it inside here and now that is pretty much it so again what we're doing is creating this blank future right here now we get an error because we actually get a parameter right there this is just the data if there was data resolved from the future we don't need that so i'm just using an underscore so we create this blank future and then inside the for each loop for every iteration we update the value of future and we say well future is now equal to the current value then and then we fire this function where we return a new future so we're returning a new future with a 100 millisecond delay and then next time around we're adding a then method to it again so we're chaining these then methods onto the future and each time around we're waiting a hundred milliseconds before that future can move on and resolve to the next then block okay so in essence all we're doing is creating a 100 millisecond delay between adding each trip to the widget list and between each item being inserted to the current state and that's all there is to it so now we should have this delay and because we have that delay by 100 milliseconds when these are added and we animate or transition those list items there's going to be that 100 millisecond delay between transitioning them onto the screen so let me save this and i'll restart the process over here and now we can see that nice subtle effect where we stagger the list items animating onto the screen now there are many many different ways we can use animated lists in flutter to animate items onto a list off a list etc this is just one way of using them and by no means is a deep dive into animated lists but i will be doing another flutter series in the future where we'll be looking at individual widgets like a widget spotlight series where we'll look at other things we can do with animated lists as well but for now my friends that is this project pretty much complete so we've animated this thing at the top using a tween animation builder we've animated these things using animated lists we've also used the hero animation to animate these images to and from the details on the home screen and we've created custom animations using an animation controller as well so that my friends i really really hope you've enjoyed this series and if you have enjoyed it please don't forget to share subscribe and like that really means a lot and it helps out an enormous amount and if you do want to join the course and support the channel you can do by clicking the join button on the channel homepage or underneath the video right down below you also get a little cool ninja badge next to your name in the comments for that and it's 99 pence or cents per month and i've also created several premium in-depth courses on udemy so the first one is modern javascript the second one is d3 and firebase and the third one is vue.js and firebase so if you want to take one of those all the links with the discounts automatically applied to them are going to be in the video description down below so again thanks so much for watching and i'm going to see you in the very next course