/Flutter-Animation-ListAnimated

🐱‍👤 Staggered Animations made with algeria ❤

Primary LanguageDart

🐱‍👤 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(),
            ),
          ),
        ),
      ),
    );
  }

Note From : flutter_staggered_animations in pub.dev !!


Note : This Package dont Support Null-Safety for see run in terminall ==> flutter run --no-sound-null-safety


🐱‍👤 Staggered Animations made with algeria ❤