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.
No calculation is required. Because every calculation is done by RenderObject
in the Flutter framework, AnimatedTo
just hires the calculated position and starts animation there.
First, place whatever widget you want to animate when its position changes.
Container(
width: 60,
height: 60,
color: Colors.blue,
)
Then, wrap the widget with AnimatedTo
with GlobalKey
.
AnimatedTo(
globalKey: _globalKey,
child: Container(
width: 60,
height: 60,
color: Colors.blue,
),
)
GlobalKey
is necessary to keep its Element
and RenderObject
alive even when the widget's depth or position changes.
And, that's it!
All what you need to do is causing rebuilds using whatever state management packages or just setState
and change its position. AnimatedTo
will automatically leads the child
to the new position with animation.
appearingFrom
lets you specify the start position of the animation in the first frame. By providing an absolute position in the global coordinate system, the widget will appear there and then animate to the original position.
slidingFrom
lets you specify the start position of the animation in the first frame as well. By providing a relative position to the child's intrinsic position, the widget will slide from the specified position and then animate to the original position.
AnimatedTo
does NOT work withListView
becauseRenderSliver
's layout system is totally different fromRenderBox
's.AnimatedTo
does NOT work with horizontal or bidirectional scrolling widgets.
Argument | Type | Description |
---|---|---|
globalKey | GlobalKey | A key to keep the widget alive even when its depth or position changes. |
child | Widget | The widget you want to animate when its position changes. |
duration | Duration | The duration of the animation. |
curve | Curve | The curve of the animation. |
controller | AnimationController? | Required if AnimatedTo is on the subtree of SingleChildScrollView . Share the controller with the SingleChildScrollView to properly animate the widget. |
appearingFrom` | Offset? | The start position of the animation in the first frame. This offset is an absolute position in the global coordinate system. |
slidingFrom | Offset? | The start position of the animation in the first frame. This offset is a relative position to the child's intrinsic position. |
enabled | bool | Whether the animation is enabled. |
onEnd | void Function(AnimationEndCause cause)? | The callback when the animation is completed. cause shows the reason why the animation is completed. |
See example for more details.
Author's X account @tsuyoshi_chujo also posts some example screenshots.
If you have anything you want to inform me (@chooyan-eng), such as suggestions to enhance this package or functionalities you want etc, feel free to make issues on GitHub or send messages on X @tsuyoshi_chujo (Japanese @chooyan_i18n).