Animating a widget between parents

Is there an easy way to animate a widget from one parent to another? I know that if I was using a Stack, I could use implicit animations, but I don’t have a Stack: my UI is built of Column, Row, and Table containers.

I’m working on a game in which dice are rolled into a tray and then the player can move them to slots. Doing this interactively with Draggable and DragTarget works fine. Now, I want to add a button that assigns a die automatically. I already have it working so that the die moves immediately, but this is a poor player experience. I would like to animate the die’s movement across the screen, but this means that it’s moving between widget parents.

I am using bloc to manage my game’s state. The widgets are generated from the current state, which knows where a die is. A die can be in the “tray” or assigned to a “slot”. Right now, my widgets are generated from this state with no trouble, but I’m unsure how I could show the die moving between locations so that the player understands what happened.

Recreate the widget from it’s state in the next parent? Maybe it will look okay when it transitions between parents?

The Overlay API might be a great place to start. Looking at the Hero widget might be also helpful

2 Likes

animated_to provides a widget named AnimatedTo which enables its child widget to change its position with animation when its position is updated for any reason, typically for rebuilding.
Note that GlobalKey is necessary to keep its RenderObject alive even when the widget’s depth or position changes.