Flutter-Animation List Animated Staggered Animations

GridView	ListView	Column

Getting Started #

First you need to add flutter_staggered_animations 1.0.0 Or + in the dependency at pubspec.yaml:

Get New Version of flutter_staggered_animations Check in .Here !


dependencies:
  flutter_staggered_animations: ^1.0.0

Import #


import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

Basic Usage #

For List.builder


@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

For List Manual List Generate


@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: AnimationLimiter(
          child: Column(
            children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 375),
              childAnimationBuilder: (widget) => SlideAnimation(
                horizontalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: YourColumnChildren(),
            ),
          ),
        ),
      ),
    );
  }