Flutter Tutorial - Animated List & Todo List - Insert & Remove Items

we want to create an animated list where an animation is always played if we remove an item from our list if we insert a new item or if we change our list so if you have a dynamic list that changes over time then you should not use a normal list because every time if you actually change an item then it jumps in your list view and this is what we can fix with an animated list which do send some smooth animation every time if your list changes if you're new here subscribe to my channel and make sure to watch this video till the end let's get started within the build method and here we want to create our animated list and inside of this animated list we want to put some items inside therefore i have created here a list of list items and this is then basically a model object which has then the title and also a url image and within our item widget the title is later here displayed and also our image is here at the start displayed and secondly i have created another file where we have then all of our list items inside and therefore i have here defined each list item with a title and also with an image to the internet and now we want to make use of this list items within our main file and we want to display here our list items as items in our animated list therefore we create here an item builder within our animated list and then we want to create here for each item a list item widget and into our widget we want to put then our item and this is what we can then access over our index from our items list we also have here an animation property which we get from our animated list which we also want to pass to our widget and also if we later click on our widget then we also want to add here some functionality and now we want to create this list item widget together so first of all put here all the properties inside which we have inserted before and now we go to our build method here inside we want to create then a normal item so i create here a new method built item where i'll create the list tile and we also want to put here some container around so that we can set for our list style a decoration with a white background color and now if i hot restart you see we have here every time the white background color for our items and also our items here are rounded and lastly we want to fill them each of our items with this image with the title and also here with this delete button therefore we go here to the list tile and here inside we start with the leading property where we put then a circle avatar as an image inside and here inside we put then the url image of our item inside and with this we have here this image at the beginning we also want to go here to the title property and here we want to include send a text widget and here i access and the item title which we have stored in before and with this we also display here for each of our items the title next to it and lastly we want to create our delete item therefore you have the property trailing and here i create then an icon button with this delete icon and later if we then click on this item then we want to call here this on clicked handler which we have put inside before and with this we also have here this delete icon at the end next we want to animate our list if we delete an item or also if we add an item to our list to achieve this we follow three simple steps the first one is you go to your animated list widget and here you add a key and then we want to add here a list key which we want to add here to our state which is then of a global key of this animated list state and with this list key we can now access the state of our animated list and therefore we can go over to the second step every time if we click here on this delete icon then we want to call here this remove item method and we put here the index of our item inside and now we create this remove item method and here inside we basically delete then the item on which we have currently clicked from our items list and this is the list which we have stored here in our state and secondly next to removing our items from this list we also need to remove our item from our animated list and therefore you need to call here this list key current state and with this we access the state of our animated list and here on our state we want to call them this method remove item and here inside you need to pass then the index on which you have clicked and secondly before we delete our item from our list we also want to get this item so that we store it here inside of this field and with this we have here this list item on which we have clicked so let's say we click here on this item and click on this delete button then we have here this list item model data about brett and also this image here inside and we need this because here within the remove item you also need to create then a builder and here you need to create then the item which should be displayed during the remove animation so every time if we click here on this remove icon then the animation starts and during the animation this widget is then displayed and in our case we want to display then this removed item within the list item widget that we have created before and next to it we also need to pass it again the animation which we get here from this builder and also the unclicked handler which we don't need to implement and now we remove our item here from both list from our own list and also from this animated list widget however if you click here on this delete icon you will see that there is no animation and therefore you need to go to this list item widget and the insight you need to define then the animation and this is what we are doing then based on this animation object and now you can choose here any animation which you like so i take you the size transition animation and then i put here this animation object inside which we got from the animated list builder and now we can try it out so i click here on this delete and you see it is always animating and if you want to have more control over your animation you can go back to this remove item method and here within this remove item you can also set the duration how long it should take for this animation to animate and now if you click here on this delete button then this animation will take 600 milliseconds and of course you can always go back to your list item widget and here you can then replace your animation so for example i put here this time a slide transition inside and now after i hot reload i can click here on this delete item and you see we have here a slight transition every time if we delete our item and if you want to learn more about how to build animations i will link some videos in the description so that you can learn more about it we also have here a small layout error which we want to fix so every time if you click here on this delete icon then you see that these images here at the bottom are always swapping and this doesn't look so great so the problem is exactly here this image which we put here inside and here the problem is basically that the size transition is of this animated widget and this is a stateful widget and therefore every time if we click here on this delete icon then we need to make sure that these images are not swapping anymore and therefore we simply go here back to our list item widget and here within our stateful widget we want to set then a key a value key and we want to set then this item to our url image which is then representing here our model object item and all in all you always need to add a key to a stateful widget in case you reorder here some widgets so in our case if we click here on the delete button then our widgets are reordered within our ui however if you add here this key then you see we don't have here anymore these swapping images at the end if you want to learn more about how to use value keys global keys and so on then i will link some videos in the description where you can learn more about it next we also want to animate items every time if we click here on this add item and then we want to add here an item to our list and want to animate it to achieve this is pretty simple we go back to our main file and here within our scaffold i have added this floating action button which you see here at the bottom and every time if you then press on this button then we want to insert our item and this method basically works and similar to the method which we have used before where we removed an item so let's create right now this method insert item and then instead of calling here this items remove what we did here inside of this remove item method we want to call this time items insert and then we want to also add here an index where we want to insert our item inside of our list and we put here for example the index to 1 and this means that our item will be always added here at the first position which is year one so if i select here zero then it would be added here at the total beginning of our list and secondly we need to define here inside the item itself which we want to insert and therefore i simply create here a new list item and here i put then a title inside and also an image and again like before you need to add this new item inside of two lists first of all of this items list which is here within our state and secondly we need to add it to our animated list so that it also knows that we want to animate our item and therefore we want to call here on our global key the current state and like you remember this global key we have then put here inside of our animated list and now we can access the state of this animated list and here on this animated list state we can then call the method insert item and here we want to put then also the new index inside which is here one and we also want to add here some duration for our animation and now we can try it out so i click here on this plus icon and you see that we get a new item animated inside and it is every time animated here at the position one and if you want to make it more interesting then you also can replace here every time your item so that you don't include your every time the same item and i simply take you then an item from our list items which we have here already inside and defined and i basically shuffle this list and then i take a random item out of this list and now let's also try it out so i click here on this plus icon and you see we have here every time a random item which is then inserted here to our list at the position one and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer 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 you

Channel: HeyFlutter․com

Views: 39,713

Keywords: android, animate, animate list, animated list, animatedlist, animatedliststate, animation, dynamic list, flutter, flutter animated list, flutter animation, flutter animations, flutter animations tutorial, flutter list, flutter todo list, flutter tutorial, flutter widgets, globalkey, how to animate list, insertitem, ios, list animation, listview, mobile, removeitem, ui/ux

Id: E3SQOqUq8Mg

Length: 11min 7sec (667 seconds)

Published: Tue May 11 2021