I have a ListView whose sorting depends on its items state: the Item model objects have a bool property, isActive, and all Items with the value of true are sorted before all with the value of false. Tapping an item toggles its isActive state. The logic for setting the state is not done in the list itself; rather, it is performed by a BLoC, which also knows how to sort the items. As a result, all the list gets is a stream of List<Item> which are correctly sorted.

Currently, the result is pretty jarring - the tapped item disappears from its place and appears somewhere else in the list, and I would like to make it smoother, like maybe animate the position change - something like what ReorderableListView does, but programmatically. I have no idea how to do it, I started messing around with AnimatedList but I'm not sure this is the right component for my use case - it can animate removals and additions, which is not really what I am doing (I could add a removal immediately followed by an addition, but this seems complex).

This is the code I have so far (simplified), it supports animation removal:

class ItemListWidget extends StatelessWidget {
  final items = [
    'Item A',
    'Item B',
    'Item C',
    'Item D',
    'Item E',
  ];

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      initialItemCount: items.length,
      itemBuilder: (context, index, animation) {
        final item = items[index];
        return ListTile(
          title: Text(item),
          onTap: () {
            final state = AnimatedList.of(context);
            state.removeItem(
              index,
              (context, animation) => SizeTransition(
                sizeFactor: animation,
                child: ListTile(title: Text(item)),
              ),
              // duration: const Duration(seconds: 5),
            );
            items.removeAt(index);
          },
        );
      },
    );
  }
}

It does remove the item, I now would need to somehow attach adding the item again at a different index when the removing animation is ready. But it just doesn't seem right, I don't think I will be able to animate the position

Another thing is that I am pretty confused with the API, I'm not sure if I'm using it correctly. I never use the animation parameter in itemBuilder because I don't understand what I could use it for.

How can I implement this in Flutter?