Animated List in Flutter — Normal is too middle class.

You can’t count the number of times you used Lists in flutter. Right? But displaying changes to List without animations is boring and looks confusing to user.

Hence Flutter has Animated List. Animated List can be used to display changes to a list in a cool way (i.e. not boring).

Show me the CODE

Hmm. Lets start.

First, get started with any design you want. I hope you can start a project and build to the starting point.

Once you are at a design you want to start with, we will start using the Animated List.

First of all, create a list of anything. I am using list of strings here.

List<String> list = ['initial one', 'initial two'];

Let me bombard you with some code.

item

So, Let me explain.

AnimatedList — is the widget obvious.

Key — we need a key to access its methods (used to update the list) outside the widget. You must define it before you use.

final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

itembuilder — We provide what we want to build in the list here. Here I used a _buildItem method to which we pass the object (here string) and the animation. We will get to that method later, but I think most understood what that method means already. :)

FadeTransition — This is a transition or we can say the animation in which elements enter and exit when you add or remove something from the list. There are other animations which you can use or you can even create them yourselves. Isn’t that cool?

Now coming to the _buildItem method.

Here it is pretty simple.

We display a ListTile with Text as a title which we get from the AnimatedList.

Next lets get to the real stuff.

Here as you see, we use the key which we provided to the AnimatedList to access its method insertItem.

Now we can call this method where we want to add the element.

Similarly you can write the remove function

_listKey.currentState.removeItem(_index, (context, animation) => Container());
list.removeAt(_index);

Kudos! We you did it.

That is all. Now use it to make cool UI.

Connect with me on Linkedin — https://www.linkedin.com/in/kevalprajapati2003/