[Question] - How to restart animation?

[definev]

I love your package so much it hides almost the boilerplate part. So declarative animation.
I make this effect but I got an issue about restarting the animation.

An animation I'm trying to replicate this animation.

Currently, my implementation is pretty close but I don't know how to restart animation so It's a bit weird.

My reproduce: https://gist.github.com/definev/d1aacf50122f62e79a956eb7245e495c

Screen.Recording.2022-06-10.at.22.15.17.mov

The UI is separated into two-part:

• Center: white block.
• Border: yellow block.

HYNH0059.mp4

My border is regenerating every user increasing depth so it auto animates.
I want to trigger the center to re-animate when changing depth.

[gskinner]

Hi @definev - glad you're liking the library! Currently to restart the animation, you can use its controller, which you can get from either onInit or onComplete:

foo.animate(
  onInit: (controller) => _animController = controller // save off the controller
).fade().slide() // or whatever.

// then later, restart the animation:
_animController.forward(0)

I believe (untested) you should also be able to restart the animation a bit more declaratively by assigning a new unique key to the animation when the view rebuilds.

foo.animate(
  key: myKey // change the key when you want it to restart.
).fade().slide()

In the future, I'd like to add a bit more state-awareness onto Animate so that this is a bit easier to control.

[definev]

Thank you, I like the key approach, it works but I am using AnimatedContainer in the child of Animate widget. Unfortunately, the side effect destroys the state of AnimatedContainer :( But I think I don't need AnimatedContainer, I can also calculate the size of the grid yourself, thank you for your answer! Love your package!