Flutter Animated List

We will focus on Flutter Animated List using AnimatedList and SizeTransition widget. Along the way we will also focus on Global Key in Flutter.

We will start by creating a stateful widget name HomePage(). And inside it we will declare a list item

final _items = [];

And then we will create a global key

  final GlobalKey<AnimatedListState> _key = GlobalKey();

We will need this global key since we will do animation and transition.

And after that we will add a method for clicking on the button and show a new list widget on the screen.

  void _addItem() {
    _items.insert(0, "Item ${_items.length + 1}");
    _key.currentState!.insertItem(0, duration: const Duration(seconds: 1));
  }

The above method adds an item in the _items list and this creates a new widget based on a new build. This build creates a new state object as well.

This state object is saved in the _key variable. This saving states is important for  animation and transition.

The we added a remove method for removing and animation of the list items.

  void _removeItem(int index) {
    _key.currentState!.removeItem(index, (_, animation) {
      return SizeTransition(
        sizeFactor: animation,
        child: const Card(
          margin: EdgeInsets.all(10),
          elevation: 10,
          color: Colors.purple,
          child: ListTile(
            contentPadding: EdgeInsets.all(15),
            title: Text("removing", style: TextStyle(fontSize: 24)),
          ),
        ),
      );
      ;
    }, duration: const Duration(seconds: 1));

    _items.removeAt(index);
  }

In the above method we see that, we remove the state objects first for animation from _key.currentState and we also remove a list item from the _items List.

Inside the remove method we used SizeTransition() widget. See how we assigned the animation object here.

Let's take a look at our build method

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated List'),
      ),
      body: AnimatedList(
        key: _key,
        initialItemCount: 0,
        padding: const EdgeInsets.all(10),
        itemBuilder: (_, index, animation) {
          return SizeTransition(
            key: UniqueKey(),
            sizeFactor: animation,
            child: Card(
              margin: const EdgeInsets.all(10),
              elevation: 10,
              color: Colors.blue,
              child: ListTile(
                contentPadding: const EdgeInsets.all(15),
                title:
                Text(_items[index], style: const TextStyle(fontSize: 24, color: Colors.white)),
                trailing: IconButton(
                  icon:  Icon(Icons.delete, color: Colors.redAccent.withOpacity(0.9),),
                  onPressed: () => _removeItem(index),
                ),
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: _addItem, child: const Icon(Icons.add)),
    );
  }

Inside the build method, we used AnimatedList() widget, which takes a key object. It's very important, otherwise your app will crash.

And inside that, we used SizeTransition() widget. 

Then we have floatingActionButton and the onPressed event.