Flutter Animation Design

Question

How can I achieve similar animation in Flutter ? Tried different animation with Animated position. It seems to be failing.

https://giphy.com/gifs/XJ1awq5Wr83uJFkLup

Answer 1

You can try this example custom made swap animation using TweenSequence

final Animation<double> animation = TweenSequence<double>(
 <TweenSequenceItem<double>>[
  TweenSequenceItem<double>(
    tween: Tween<double>(begin: 5.0, end: 10.0)
        .chain(CurveTween(curve: Curves.ease)),
    weight: 40.0,
  ),
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(10.0),
    weight: 20.0,
  ),
 ],
).animate(myAnimationController);

Though, customization may take some effort for you to apply this on more than 2 items, i believe this simple example can take you to what you wanted to achieve based on your animation design.