toStaggeredList static method

List<Widget> toStaggeredList({
  1. Duration? duration,
  2. Duration? delay,
  3. required Widget childAnimationBuilder(
    1. Widget
    ),
  4. required List<Widget> children,
})

Helper method to apply a staggered animation to the children of a Column or Row.

It maps every child with an index and calls AnimationConfiguration.staggeredList constructor under the hood.

Default value for duration is 225ms.

Default value for delay is the duration divided by 6 (appropriate factor to keep coherence during the animation).

The childAnimationBuilder is a function that will be applied to each child you provide in children

The following is an example of a childAnimationBuilder you could provide:

(widget) => SlideAnimation(
  horizontalOffset: 50.0,
  child: FadeInAnimation(
    child: widget,
  ),
)

The children argument must not be null. It corresponds to the children you would normally have passed to the Column or Row.

Implementation

static List<Widget> toStaggeredList({
  Duration? duration,
  Duration? delay,
  required Widget Function(Widget) childAnimationBuilder,
  required List<Widget> children,
}) =>
    children
        .asMap()
        .map((index, widget) {
          return MapEntry(
            index,
            AnimationConfiguration.staggeredList(
              position: index,
              duration: duration ?? const Duration(milliseconds: 225),
              delay: delay,
              child: childAnimationBuilder(widget),
            ),
          );
        })
        .values
        .toList();