Animation In Flutter: AnimatedList

A List is highly important in any application. It may be a list of people, a list of menu items, a list of to-do items, a list of games, and so on.
And, of course, if there is a List, it can also conduct Insertion and Deletion of an item. For example, consider the Todo application, which allows users to add tasks and mark them as done.
That's OK. But can you see a flaw? The list just jumps when entering or removing a Todo. And, if the list is too long, we may not be able to identify where the item was entered or deleted.
As you might expect, the solution is to create some type of animation that accomplishes the same purpose but with greater visual clarity.

AnimatedList

To animate the list, Flutter offers us an incredible widget called AnimatedList.
Which is, as the name implies, an animated version of a basic ListView. When an item is added or removed from the list, it can animate it.
Let's use the same Todo app as an example to learn how to utilize it:
You will find the starter project in the below repository:
https://github.com/red-star25/AnimatedListBlog/tree/main/WithoutAnimatedList

Implementation

Replace `Listview.builder` with `AnimatedList`

To utilize 'AnimatedList,' we must enclose the children within it. So let's get this done soon.

In our case replace

Flexible(
            child: ListView.builder(
              itemBuilder: (context, index) =>
                  buildTodo(listOfTodo[index], index),
              itemCount: listOfTodo.length,
            ),
          )

with

Flexible(
            child: AnimatedList(
              itemBuilder: (context, index, animation) =>
                  buildTodo(listOfTodo[index], index, animation),
              initialItemCount: listOfTodo.length,
              key: key,
            ),
          )

There are three parameters that we need to pass:
1. itemBuilder: This is where we return the widget that we wanted to display the user. The only difference between it and ListView.builder is that there is an extra parameter called animation. It returns a double animation value.
2. initiaItemCount: It defines, how many items are in the list initially there in the list.
3. key: This is an essential factor. Because it allows us to insert/delete elements from the AnimatedList. There are two methods for updating the AnimatedList:
  1. Using of(context) :
    AnimatedList.of(context).insertItem(index);
    AnimatedList.of(context).removeItem(index, (context,animation)=> ...)
  2. Using GlobalKey :
    You can create a global key like this :
    final key = GlobalKey<AnimatedListState>();.
    And then pass it to the AnimatedList's key property.
    AnimatedList(key: key)

Using `key` to update the List and UI.

Now that we've created the Global key and given it to the AnimatedList, we can change the UI by updating our insertTodo and removeTodo methods.

void insertTodo(int nextIndex, Todo todo) {
  listOfTodo.insert(nextIndex, todo);
  key.currentState!.insertItem(nextIndex);
}

void removeTodo(int index) {
  final item = listOfTodo.removeAt(index);
  nextTodoIndex--;
  key.currentState!.removeItem(
    index,
    (context, animation) => buildTodo(item, index, animation),
  );
}

You may access the insertItem and removeItem functions by accessing the AnimatedList's currentState. The currentState in this case is a AnimatedState.

Supply `animation` value to TodoWidget

Once the insertion and deletion procedures have been implemented. When the user adds or deletes an item, it's time to animate the list item.
To do this, we must provide the animation value to the TodoWidget. Then we may wrap our Widget in any AnimatedWidget we choose.

Widget buildTodo(todo, int index, Animation<double> animation) =>
    TodoItemWidget(
      todo: todo,
      animation: animation,     // <---Here
      onClicked: (value) {
        setState(() {
          todo.isCompleted = value;
        });
        removeTodo(index);
      },
);

Now we also have to define this property animation inside the TodoWidget class.
https://gist.github.com/red-star25/56ea45fc9bd4d388b476a7d667696bd8

Final Step

After initializing and passing the animation value we can simply use that inside any Animation Widget like below:

Widget build(BuildContext context) {
  return FadeTransition(
    opacity: widget.animation,    // <-- Here
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
        elevation: 0.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: CheckboxListTile(
          onChanged: (value) => widget.onClicked(value),
          value: widget.todo.isCompleted,
          title: Text(
            widget.todo.title,
          ),
        ),
      ),
    ),
  );
}

Here, I've used FadeTransition which will Fades In the item when inserted and Fades Out the item when deleted.
You can also use different Animation Widgets like :
SlideTransition,ScaleTransition,SizeTransition,RotationTransition,PositionedTransition,RelativePositionedTransition,DecoratedBoxTransition,AlignTransition,DefaultTextStyleTransition,FadeTransition.

Final Code :

https://github.com/red-star25/AnimatedListBlog/tree/main/AnimatedListFinal

Final Words:

Thank you for taking the time to read this article. 🙏
If you found it useful, please share it with others. 🤠
Also, if you have any suggestions, please leave them in the comments section. ✍️
See you soon. Until then....

Animation In Flutter: AnimatedList

Comments

Animation In Flutter

Animation In Flutter: Staggered / Sequence Animation

More from this blog

100 Blogs Later: Lessons from Code, Content, and Consistency

A Practical Journey from Application to Distributed Systems - Part 6

A Practical Journey from Application to Distributed Systems - Part 5

A Practical Journey from Application to Distributed Systems - Part 4

A Practical Journey from Application to Distributed Systems - Part 3

AnimatedList

Implementation

Replace `Listview.builder` with `AnimatedList`

Using `key` to update the List and UI.

Supply `animation` value to TodoWidget

Final Step

Final Code :

Final Words:

Command Palette

Comments

Animation In Flutter

Animation In Flutter: Staggered / Sequence Animation

More from this blog

AnimatedList

Implementation

Replace Listview.builder with AnimatedList

Using key to update the List and UI.

Supply animation value to TodoWidget

Final Step

Final Code :

Final Words:

Replace `Listview.builder` with `AnimatedList`

Using `key` to update the List and UI.

Supply `animation` value to TodoWidget