Flutter Tutorial - Animated List - Insert & Delete (Todo List)

[Music] if you have ever asked yourself how to do animations in a list then this animated list is for you in this video we want to create an animated list where if we click here on this icon that the animation will start and we also can insert items into our list and this is how it looks like here in our build method we have a column and we want to show first of all the button insert and also then this animated list and first of all we get started by implementing here and extended so we want to later put our animated list inside of this container and below we want to add some padding and inside of it we create our insert button and this is a new method where we basically put our erase button inside with some text text style and then we also set here color for the button and an unpressed handler so that we later can do the functionality what should happen if we click on insert item and this looks like this so we have our button here with some padding and now we want to implement the animated list first of all we add here field to our state with the items which we want to put into the list and here i have a shopping list with some items where we have here the title of the milk and some image and this items list we want to put here into our animated list so we create an animated list and then we need to set here our initial item count so this is the item count which we have in the beginning of our animated list and which later needs to get updated and then we also add here this item builder inside and here we get some parameters from this item builder and here instead of the container we want to add our item so let's create a new method with build item and we do here all the parameters inside what we get and we also put our individual item which we want to build inside and now we create here this build item method and here we also have all the parameters and then we want to create here this shopping item widget and this is what we want to create in a different file later and here inside we want to put also all the information inside so we put our item inside it will be of the type of this shopping item which we have here so this will be one specific item which is going here inside and we also put the animation inside and i will later talk more about what it is doing and we also want to add some unclicked handler so basically if you later click on this item then we want to do some functionality now it's time to build here this item and what you see it's like a card a white card we have an avatar we have some text and also this button here and this new shopping item widget gets here first of all all the parameters and now we create here a list tile and inside of this list tile we want to add some padding so we add some space around our item and then we want to add here this leading property and like you see the leading property will be our avatar then we have here a title and then we have a trailing here i will put the circular avatar into our leading this gets the size of 32 and we set here our background image which we get from our shopping item and there we access our url image and after the image it comes the title so we simply wrap it in a text widget and then comes the trailing icon so here i create an icon button with some icon then i set here some color and the size of this icon and in the beginning we also set this icon it will be a check and then we also call this on pressed and we will call this on clicked handler which is going outside so that we later can add the functionality for it and now if i hot restart this application it looks already like this so we have our item and we also want to add here some white background and therefore we wrap this list tile into a container and inside of this container we first of all set the decoration and here inside we can set a border radius to make our tile rounded and we also set the color to white and this will look like this then and we also want to add some margin here at the top so that the items get some space between and this is then how our item should look like now that we have created these items we want to add the animation and it looks like this then so we can do here different animations i will show you too and you can basically create any animation you like and now we want to add the functionality what happens if we click on this button here and therefore we need to handle this on clicked handler and here first of all we want to create a new method where we want to remove our items so every time if we press on this the item will be removed from the list and inside we put our index of our item here inside here inside of this method we want first of all to remove the item so from our items list where we have all our shopping items inside this one here we want to remove the index and that's not everything what we need to do here because we have to do here with the animated list and the animated list doesn't know if the items changes and what we need to do therefore is to add a key to this animated list so that it knows if something changes here and how we do this is by going here to the top of our state and then we add here our global key of the animated list state and this key is really important because this is needed to do the animation in our list and we set here this key inside because initially we set here this item count and the animated list never knows really when this item count changes and so we need to tell the list over the key that this item count changed and then he will do the animation for us therefore we go here back to our remove item method and here we want to access the key which we have created before and which we have wired up with our animated list and with this one we get the current state of our animated list so this is the animated list date which is inside of this animated list and now we have here direct access to this animated list and can remove an item inside so we will remove also the index like we did it here before so basically you need to delete it twice one time from your items list and one time from the animated list and then you have here also this animation which you can define and this is what we want to do here inside so you can define here in this method how this animation should look like and we will simply tell him okay please build this item and do the animation so what we need to do right now is to check first of all that everything is working so let's try this out if i click right now here on some items you see they are deleted but it's like a state update and there's no animation and that's what we want to add and by the way if you want to get the source code of this example you can get it with the first link in the description box and with the second link of the description box you can get my flutter course where i show you how you can be more efficiently with flutter now we are going here to this build item method and there we want to add the animation and our animation will be here inside of the shopping item widget and what we get here is this animation and now we can simply build this animation and this is pretty simple we simply wrap our whole widget which we have here inside of the size transition widget and then inside of it we have the size factor where we need also to set an animation double like we have here and this is what is going here inside and now he is trying to do every time a size animation every time we click here on this item so let's try this out i restart the application and now if i click here on this item you see that we have animation going on and it's a size animation so he will reduce its size over the time and how this is working is that our animation here goes into our size transition and the size transition chaos then that's this widget which we put here inside into our child property gets smaller we can also change it and use other animations so you can also put here for example the scale transition inside and then if you hot reload and now if i click here on some item you will see that we have a different animation so it's scaling and it's scaling down every time and basically you can do here any animation you like i will also link another youtube video in the description box where you learn more about animation and how everything works with animation now the last thing is also to make this one here working so every time we want to insert an item because right now we are only removing items and now the time comes to also include an item and therefore we go back to our main file and here we create a new method instead of remove item we create this method insert item and here inside we want to first of all say at which position it should be inserted in our list so we set here the index and then we say here which item should be included and now we can also call here this method inside of our unpressed and here you can say with the first parameter that it should be here at the second item so it will be inserted at this position and we take here one item and i simply take here the first item of our list and this will be every time a milk so every time i will include here milk if i press on this button but this is also what you can change so you can put your individual item here inside and now we need to add the functionality so the first step is to insert this item into our items list at our state level so this is again this item list with all the shopping items which we have and then like before we also need to add it to our animated list and we do the same thing so we call our key current state like we did it here before and then we get this state of our animated list and here inside we tell the animated list okay we added an item at the index 2. and that's all what we need to insert an item and we can test it right now out so i click here on insert item and i clicked also twice so you see that we have here two items and every time it will be a milk item because i have said here that it should be this item of our list and now we can remove your items and they will be animated and we can also insert new items every time at the second position and if you want to change it you can also change the index in the main file to another position so let's quickly do it i will put it to the search position so it will include here at this position at the third so we have zero one two three and now every time the milk will be included here at the third position and like you can see every time it will be included here hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Applause] [Music] you

Channel: HeyFlutter․com

Views: 34,680

Keywords: Flutter, Dart

Id: rDFJhIobj7I

Length: 12min 15sec (735 seconds)

Published: Thu Oct 15 2020