How to animate elements in a Flutter SliverList?

Question

I have a SliverList which I use with a SliverAppBar to animate the app bar when the user scrolls the list (standard use case of slivers really, nothing fancy).

Now I'd like to add animations to the elements in the SliverList . Like for instance horizontal slide transitions when items are added, or a kind of a vertical "shuffle" between elements when the list is reordered. The AnimatedList offers some of these features, but not the SliverList.

My understanding of the Framework is that it would probably be possible to wrap the elements provided to the SliverList within an AnimatedWidget (or some similar widget) to animate the changes. However my knowledge of Flutter animations is still a bit too fresh, so I'm asking for help.

Here's part of my code. I'd like to animate the GameScoreWidget instances below.

SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    if (index == 0) {
      return ListReorderWidget(viewModel: viewModel);
    }
    else if (!viewModel.isLatestGame(index-1)) {
      return GameScoreWidget(position: index-1, viewModel: viewModel);
    }
    else
      return Dismissible(
        direction: DismissDirection.endToStart,
        child: GameScoreWidget(position: index-1, viewModel: viewModel),
        key: UniqueKey(),
        background: Container(color: Colors.red),
        onDismissed: (direction) {
          onGameDismissed(context);
        },
      );
  },
  childCount: viewModel.games.length+1,
  ),
)

I could'nt find any relevant answer to my problem. I found this question that's related Animating changes in a SliverList

But no answer...

Answer 1

Use

https://pub.dev/packages/auto_animated

This package gives you LiveSliverList() which can be used to animate a sliverList easily