List item animation between columns

383 Views Asked by At

I basically have a layout with two columns.

When something happens on an item on the left column, I want to animate it to the bottom of the column on the right (where the read footer is)

enter image description here

The first problem is that I'm new to flutter animations and to be honest I don't even know where to start. PositionedTransition seems to be the best fit, but not quite sure how it would overlay into a diffent list.

The second problem is that the initial and final locations will have to be dynamic, as both the affected list item (initial) and the red footer (final) can be anywhere in the visible part of the lists.

Do you guys have any tips, ideas, examples that I can take a look?

Thanks so much.

2

There are 2 best solutions below

2
On

I don't understand exactly what you want to do but maybe this is what you want.

Search the Draggable -this

2
On

Looks like your task can be broken down into 2 main concepts, and I've answered similar questions on both concepts before.

  1. Animate an item from a list to another list: https://stackoverflow.com/a/69470439/1032613

  2. Apply a Bézier curve to the animation path: https://stackoverflow.com/a/61129258/1032613