flutter_staggered_animation

Recently I had to achieve various entrance animations in my app and came accross several articles :

• Flutter Documentation : Staggered Animations
• Iiro Krankka : Orchestrating multiple animations and creating a visual enter animation in Flutter

I love how free you are with Flutter animations, but it becomes a real mess as soon as you have multiple coordinated animations.

I ended with a solution that makes easier to declare such staggered animations, based on indexes.

Stagger

StaggerIn(
  duration: const Duration(seconds: 3), // <- Total animation duration (here, each step is 1 second since total steps are 3)
  child: Column(children: <Widget>[
    StaggerStep.fade(
        index: 0, // <- Starts at 0
        steps: 3, // <- Ends at 3
        child: Container(
          width: 100,
          height: 40,
          color: Colors.red,
        )),
    StaggerStep.slide(
        index: 1, // <- Starts at 1
        steps: 1, // <- Ends at 2
        child: Container(
          width: 100,
          height: 40,
          color: Colors.green,
        )),
  ]))

0           1           2           3
|           |           |           |
<--------------- red --------------->
            <-- green -->

You can also use Stagger with a custom Animation<double> instead of a StaggerIn which is based on a duration.

More examples : Page transition, Iiro's artist page