How to animate list changes in Flutter

Question

If I have a list (of ListTiles for example) that can be added to, removed from, and swapped, what would be the best way to animate these changes? I am using a reorderable list if that makes a difference. Right now my list has no animations, I just call setState when data is changed.

Answer 1

I think you need AnimatedList...I wrote an example.

You can only set Duration when you want to insert into the list or delete from the List and this is achieved by creating a GlobalKey of AnimatedListState...

I wrote an example code for inserting

class Pool extends StatelessWidget {
  final keys = GlobalKey<AnimatedListState>();
  var list = List.generate(3, (i) => "Hello $i");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: AnimatedList(
          key: keys,
          initialItemCount: list.length,
          itemBuilder: (context, index, animation) {
            return SlideTransition(
              position: animation.drive(
                  Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
                      .chain(CurveTween(curve: Curves.ease))),
              child: ListTile(
                title: Text(list[index]),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          list.insert(0, "NothingYay");
          keys.currentState.insertItem(0, duration: Duration(seconds: 2));
        },
      ),
    );
  }
}

I hope this helps you.

Check Flutter Widget Of The Week (AnimatedList)