animated_to

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 RenderObject's business in the Flutter framework, AnimatedTo just hires the calculated position and starts animation there.

Usage

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.curve or AnimatedTo.spring passing GlobalKey.

AnimatedTo.curve(
  globalKey: _globalKey,
  child: Container(
    width: 60,
    height: 60,
    color: Colors.blue,
  ),
)

Note that GlobalKey is necessary to keep its 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.

Spring animation

animated_to provides AnimatedTo.spring which animates its child using SpringSimulation.

https://api.flutter.dev/flutter/physics/SpringSimulation-class.html

This simulates its position transition based on the physical simulation, which make the animations smooth and natural.

What you have to do is just switch AnimatedTo.curve into AnimatedTo.spring to activate spring simulation. You can also configure your own SpringDescription using description argument, or you can use pre-defined configuration using @timcreatedit's springster package.

https://pub.dev/packages/springster

As springster is also used inside animated_to package(thanks @timcreatedit!), make sure you may have potential risk of dependency conflicts when directly depending on the package on your app side.

Some more features

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.

Limitations

• AnimatedTo does NOT work with ListView because RenderSliver's layout system is totally different from RenderBox's.
• AnimatedTo does NOT work with horizontal or bidirectional scrolling widgets.

All arguments

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	(curve only) The duration of the animation.
curve	Curve	(curve only) The curve of the animation.
description	SpringDescription	(spring only) The configuration of the spring simulation.
velocityBuilder	Offset Function()?	(spring only) A function to provide initial velocity to start spring 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.
sizeWidget	Widget	A widget for calculating desired size and position regardless of animations.

See example for more details.

Author's X account @tsuyoshi_chujo also posts some example screenshots.

Contact

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).