Flutter Animated List

Created At: 2022-11-22 23:28:51 Updated At: 2022-11-23 00:07:38

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));


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

  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),
                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. 


Add Reviews