Flutter — AnimatedList, SizeTransition & Dismissible

Want to spice up your lists? Use an AnimatedList, adding smooth 60fps animations to your content. Learn here now!

Final result of a SizeTransition in an AnimatedList with a Dismissible Widget

We will be using the AnimatedList Widget, with a GlobalKey of the AnimatedListState type to manage it, and the SizeTransition and Dismissible Widgets to animate our content.

All of these Widgets are part of the Flutter SDK and do not require any installation.

Before starting

The AnimatedList Widget works similarly in principle to a ListView.builder or in a very basic way, a For loop. It is given an initialLength which defines how many times it will run its loop. The main feature of this Widget is that it provides us with an implicit animation that we don’t need to manage manually.

Let’s start with declaring our variables

To manage our AnimatedList we will need to be able to access its state. To do so, we need to use a GlobalKey of the AnimatedListState type. We will declare and instantiate it right away.

We will also need to have a List, and for this example it will be a List of Strings.

To add some variety, we will be using a Random number generator to create a different String on every item we add to our list.

Adding our AnimatedList

Inside the Scaffold of our application we will add our AnimatedList Widget. We will need to use three of its properties:

• key — Where we use the animatedListKey we declared above.
• initialItemCount — Where we use the length of the list we declared above to tell our AnimatedList how long is out list to start with.
• itemBuild — This where things get different. Here is where we get what we need to be able to render each item of our list. Inside this new scope we will be provided the main context of the application, the current index through which our AnimatedList is looping, and an animation which enables to run our SizeTransition animation later.

SizeTransition — Our main animation

Inside the builder of the itemBuilder property of our AnimatedList we will return a SizeTransition Widget. It has the following properties:

• sizeFactor — In this property we assign the animation provided by the AnimatedWidget’s itemBuilder. As the animation value is a double at any given time of the animation as the frames run, it can determine the size of the Widgets inside our SizeTransition Widget.
• child — Where will place our Text widget that will display the String from our List.

Notice that we are only using a simple Text widget in this example. Further on we will build a Stateless widget to display our text.

Adding items to our list and animate it

Let’s now create out addItem() method, which will add a new item to our list and also tell our AnimatedList that a new item was added to the list it is displaying. This is necessary, otherwise the AnimatedList will not re-render and display our new item. Notice that we don’t need to use setState method of our Home Statefull Widget to re-render. As we will see below the insertItem method from the currentState of our AnimatedList will take care of this for us.

We are using the rng, declared in the beggining, to generate a random number for every new item.

Testing our animation by adding an item

To test our animation, we are going to add a FloatingActionButton to our Scaffold and have it call the method we created above:

Basic testing

When we press our button, a new item gets added to the list and the SizeTransition animates to increase the size of our widget vertically until it’s completely visible.

Our basic animation works. Great! Let’s improve the looks.

Creating a Stateless Widget to contain our text

Instead of just using a Text Widget, we are going to create a Stateless Widget that we can re-use in the future. This Widget will expect a variable of the type String, which will be the String from our list.

We will put our Text Widget inside a Container, give it a center alignment and a padding, for better UX.

Having this in a custom Widget helps keep our code clean and easier to read.

If we now replace our original Text Widget with our new custom Widget:

We get this:

Removing items with a gesture and animation

Now that we can add items and see our animation, we want to be able to remove items as well. But this time we are going to use a Widget that makes our life really easy, with its own animation and gestures. The Dismissable Widget.

The Dismissable Widget allows the user to swipe in multiple directions and once it detects a swipe, it will call a method and initiate an animation. We will leverage this to remove an item from our list.

We will surround our custom TextContainer Widget, inside the builder in the AnimatedList, with a Dismissable Widget and configure it to swipe only from start to end (left to right), give it a red background color to hint our user that this is a destructive action, and call a method to remove the item.

• key — This property needs an unique Key, so that Flutter can differentiate the different items on this AnimatedList as they are removed and the animations are run. We give the hashCode of the item on our list, as this value is unique to every variable in Dart.
• onDismissed — Provides us with the direction the user swiped in and allows us to call a method. We will call the removeItem method that we will write afterwards.
• background — Allows us to defined a Widget to be the background that is shown while the user is swiping.
• direction — Here we define that we want the user to only be able to swipe left to right, which in this case is defined as startToEnd.
• child — Where we pass our custom TextContainer Widget.

Remove item method

This method will take in as parameters a String, our item, and an int, the index of our item in the list.

We will use the removeItem method from our AnimatedList, using its key, to make sure the item is removed from it, but because we are using the Dismissible Widget’s animation, we will only return an invisible, empty box. A SizedBox Widget with Zero height and width. This ensures that there is no interference.

Finally, we remove the item from our list by simply using the remove method and passing the item itself as the parameter.

Let’s see how it looks:

It’s done

We can now add items to our list with an animation and remove them with a gesture and animation.

You can find the full code of this app on GitHub.

Video on the same topic