Flutter Animation Tutorial #9 - Animated Lists

Key Takeaways

all right then gang so in this video i want to start to animate these items onto the page inside the list because currently they just pop onto the screen whenever the app first starts instead i want to slide them on from right to left and maybe have some kind of stagger effect so that the first one comes on first then the next then the next then the next with 100 or 200 milliseconds between each one so there's several different ways we can do this and i'm going to show you in this video how to use animated list widgets so right here you can see currently we're creating this list using a list view builder now to animate these tiles onto the page onto the screen instead we're going to replace this with an animated list widget so let me first do that animated list and now inside this we need to update some of these different properties before we do that let me spell this correctly animated list and this property right here this item count needs to be instead initial item count because at some point there might be different amounts of items right it's not always going to be the same amount of items we might take items out add items in etc so this is going to be initial item count so when the app first loads how many items are going to be there now we also need to update this item builder right here to have a third argument and that is going to be an animation argument which we can access then inside this thing over here so now we've done that we need to also update a couple of things at the top so if we scroll right to the top currently we have this global key right here now this is for a normal list we need to turn this into a key for an animated list so let me get rid of this and replace it with this so now we're still using a global key it's called the same thing but this time we have this type associated with it it's an animated list state so it's a special type of global key for animated lists so now we have that set up we can work on the animation of our list items so i'm going to scroll back down to our widget tree down here where we return currently the trip tiles now instead i want to wrap this inside a transition widget in particular a slide transition widget and this is going to allow us to slide on the individual list items when we're building them right here so let me for now get rid of that and instead i'm going to return a slide transition widget okay so inside here we need a couple of different properties first of all we need a child property and this is actually going to be the thing that we're trying to transition on now that was the thing we just deleted which is from the trip tiles and then index so remember we get access to index as we cycle through the trip tiles and if we recall the trip tiles is the list of widgets right here starts completely empty but then inside init state we add the trips we cycle through this list of trip objects and we add a new widget to this list for each trip object by passing it into build tile this returns a list tile so all we're doing is outputting a sequence of tiles right here but we're wrapping them in a slide transition so that for each one ultimately we're going to slide it onto the page okay now we also need another property and that property is going to be the position property so when we're using a slide transition we're basically transitioning the position of something on a page and to do that we use a special type of tween and this tween is gonna be an offset tween so what i'm gonna do is just paste this up here i'm externalizing this tween so we don't have to write it out all here inside the position and all we're doing is creating a tween which is of type offset i'm calling it underscore offset i'm setting it equal to a tween all i do is specify that the beginning is this offset and the end is this offset right here so an offset basically determines the offset of a widget in both the x and y directions now a value of zero in any given direction means that it won't have an offset at all and a value of one in a given direction means it will be offset by either the widget's full width or height depending on the direction of the offset so if we give our list items and offsets in the x direction of one it means it's going to be completely off the page over here by the width of the list item itself which is the full width of the screen so it's going to start way over here to the right of the screen right in the y direction there's no offset so it stays where it is vertically and that's the beginning position right off the screen now the end position what it's going to twin two is zero zero so it's rightful position right here zero offset so we're creating this tween so that we can transition from over here off the screen to on the screen and now we're gonna use that down here inside the position property so right here we can use this animation property that we get and from that i'm going to say dot drive and we're going to drive an animation using this offset right here that's all we're doing we're taking an animation and we're driving it using this offset and that basically controls this slide transition for us so now this child is going to be transitioned onto the screen now currently this won't work and i can demonstrate that if i refresh then it's not going to work over here right they don't animate on and that's because we first have to tell flutter every time that we add a new tile over here we also need to update the current state of the global key to say we've added a new item and that way flutter can keep track of the items added to the list and animate them so let me do this after we've added a new widget to the trip tiles let me also update this thing right here the global key current state so we do that by taking the list key that we have this thing right here and getting the current state and then using the method insert item and in here is the index of the item that we've inserted so to begin with if we add a new item to this list right here it's going to be at position zero right so we take the length of the trip tiles which will be one because we've added one item and we minus one to get that index of zero and we do that for each one so if we've added two and it's the second widget the length is two minus one which is one and that is the index of the second item we've added to the list of widgets right so now we're telling the current state in certain item and this allows flutter to understand from this key right here the global key when to animate in a new item so we've done that but again this still won't work so if i save it and refresh over here you're still going to notice that this doesn't work and we actually get an error and it says the method insert item was called on null and that's because we're trying to access the current state before the build method even runs and registers this thing right here with the list so to combat this we should only call the function after the build method has run now to do this in flutter we can use a special method so what i'm going to do is copy something and just paste it up here then i'll explain it so inside init states i'm going to paste in this thing right here so widgetsbinding.instance.add post frame callback and this takes in a function and basically all we're doing is saying okay we want to fire this function right here only when this build method has run right here so we're waiting until that's run and then inside that we're firing at trips so we can remove it from here so we know now when we're firing this thing right here it's only gonna fire after the build method has run so at that point we know that we have a current state so this is a nice little thing we can use to make sure that the build method has run on a widget before we do something so you can copy this to your cheat sheet for flutter if you want widgetsbinding.instance.ad post frame callback takes in a function which will fire after the build method has run so now if i save this fingers crossed this should all work and we see them all slide onto the page so if i refresh or restart we can see that again they all slide onto the page which is quite nice so that's cool but they do all animate in together now i'd like to stagger them a little bit so in the next video i'm going to show you a trick we can use to do that