Staggered Animations in Flutter

30 March, 2023

Contributors

ShowwcaseHQ

@showwcasehq

Staggered animations in Flutter involve animating multiple widgets at different times or with different durations. They are often used to create more complex, synchronized animations.

Here's an example of a simple staggered animation that animates the opacity of two widgets simultaneously:

import 'package:flutter/animation.dart';

AnimationController controller;
Animation<double> animation1;
Animation<double> animation2;

@override
void initState() {
  super.initState();
  controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
  animation1 = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(parent: controller, curve: Interval(0, 0.5, curve: Curves.easeIn)));
  animation2 = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(parent: controller, curve: Interval(0.5, 1, curve: Curves.easeOut)));
  controller.forward();
}

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      AnimatedOpacity(
        duration: Duration(seconds: 1),
        curve: Curves.easeIn,
        opacity: animation1.value,
        child: Text('Hello'),
      ),
      AnimatedOpacity(
        duration: Duration(seconds: 1),
        curve: Curves.easeOut,
        opacity: animation2.value,
        child: Text('World'),
      ),
    ],
  );
}

In this example, the AnimationController is used to control the animation, and two Tween objects are used to define the range of values that the opacity of each widget will transition through over the course of the animation. The CurvedAnimation objects are used to apply different curves to each Tween to make them animate at different times. The AnimatedOpacity widgets are then used to display the animations, with the opacity property set to the value of the corresponding animation object.

For more information on staggered animations in Flutter, you can check out the following resources:

Flutter documentation on staggered animations: https://flutter.dev/docs/development/ui/animations/staggered-animations
Flutter Animation Examples sample app: https://github.com/flutter/samples/tree/master/animation_examples

Staggered Animations in Flutter

More Articles