Flutter double list transition

Question

I'm trying to reproduce the following animation in Flutter (original was built in SwiftUI):

These items are backed by a dynamic data model — an array of "items" — and remove themselves on tap.

There are 2 animations in one here:

1. the fade out for the removed item
2. the slide for both sides of the remaining items

In a default Flutter AnimatedList with FadeTransition , I only get 1). My question is how to implement both of them.

I basically want to 100% replicate the animation shown in the video.

EDIT: What I figured out I need, conceptually, is this: two boxes, one stacked upon the other, both the same size (intrinsic content size of box 2). But then, only box 1 (which is invisible) should affect the layout. That is where a SizeTransition should be applied. Box 2, where the actual content gets drawn, needs to be like an overlay — not affecting layout — and on that box I need a FadeTransition.

Additionally, the item that gets removed should be drawn below the rest of the items, not above.

Answer 1

Approach #1

I suppose you can just use both FadeTransition and SizeTransition together, and you will have "almost the same effect" - not quite 100%, because the box will be fading while shrinking in size, at the same time. Depending on the animation duration, it might not be noticeably different.

To chain them, you can simply wrap them like so:

FadeTranstion(child: SizeTransition(child: YourWidget(...

Approach #2

On the other hand, if you must achieve 100% the same as SwiftUI, ie make sure the fading box is not shrinking at the same time, it's probably easiest to only apply SizeTranstion to do the shrinking, and on top of that, use OverlayEntry to stack another layer of fading animation.

That is, in the AnimatedList exit animation, apply SizeTransition and wrap it with an Opacity(opacity: 0.0, ...) to make it invisible (but still occupy the space) and shrinking-in-size. When the animation starts (during onDelete event, or alike), insert an Overlay on top of it. This could be easier to do than maintaining two lists, and can be more performant too.

I recommend approach #1, just chain both animations, and not make it 100% replica. The result should look similar enough especially if the animation is fast.