[New Feature] Staggered Animation using AnimateWidget

[GIfatahTH]

Staggered Animation

Using AnimateWidget, you can specify for each animate value, its onw curve and reverseCurve using setCurve and setReverseCurve.

This is the same example as in Flutter docs for staggered animation:

class _MyStaggeredWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        setState(() {});
      },
      child: AnimateWidget(
        duration: const Duration(milliseconds: 2000),
        cycles: 2,
        triggerOnRebuild: true,
        triggerOnInit: false,
        builder: (context, animate) {
          final padding = animate
              .setCurve(Interval(0.250, 0.375, curve: Curves.ease))
              .fromTween(
                (_) => EdgeInsetsTween(
                  begin: const EdgeInsets.only(bottom: 16.0),
                  end: const EdgeInsets.only(bottom: 75.0),
                ),
              );
          final opacity = animate
              .setCurve(Interval(0.0, 0.100, curve: Curves.ease))
              .fromTween(
                (_) => Tween<double>(begin: 0.0, end: 1.0),
              )!;
          final containerWidget = animate
              .setCurve(Interval(0.125, 0.250, curve: Curves.ease))
              .fromTween(
                (_) => Tween<double>(begin: 50.0, end: 150.0),
                'width',
              )!;
          final containerHeight = animate
              .setCurve(Interval(0.250, 0.375, curve: Curves.ease))
              .fromTween(
                (_) => Tween<double>(begin: 50.0, end: 150.0),
                'height',
              )!;
          final color = animate
              .setCurve(Interval(0.500, 0.750, curve: Curves.ease))
              .fromTween(
                (_) => ColorTween(
                  begin: Colors.indigo[100],
                  end: Colors.orange[400],
                ),
              );
          final borderRadius = animate
              .setCurve(Interval(0.375, 0.500, curve: Curves.ease))
              .fromTween(
                (_) => BorderRadiusTween(
                  begin: BorderRadius.circular(4.0),
                  end: BorderRadius.circular(75.0),
                ),
              );
          return Center(
            child: Container(
              width: 300.0,
              height: 300.0,
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.1),
                border: Border.all(
                  color: Colors.black.withOpacity(0.5),
                ),
              ),
              child: Container(
                padding: padding,
                alignment: Alignment.bottomCenter,
                child: Opacity(
                  opacity: opacity,
                  child: Container(
                    width: containerWidget,
                    height: containerHeight,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(
                        color: Colors.indigo[300]!,
                        width: 3.0,
                      ),
                      borderRadius: borderRadius,
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Here is the full working example.

One of the particularities of Animator is that you can use staggered animation with implicitly animated widget. Here is the above example with implicit staggered animation