How to use flutter_staggered_animations with a GridView?

Wrap your GridView with AnimationLimiter and use AnimationConfiguration.staggeredGrid, passing the column count and index for each child. The README provides a sample code snippet that shows how to set this up with ScaleAnimation and FadeInAnimation.

Flutter staggered animations vs animate_do: which one should I use?

Flutter_staggered_animations is specialized for staggered sequences in layout widgets, adhering to Material Design. Animate_do offers more animation variety but less built-in staggering. Choose based on whether you prioritize structured sequencing or diverse animation types.

How to combine slide and fade animations in this package?

You can nest animation widgets, such as wrapping SlideAnimation with FadeInAnimation, as demonstrated in the basic usage example. This composition allows for simultaneous effects without extra configuration.

Does flutter_staggered_animations work with Flutter web?

Yes, since it's built on standard Flutter widgets, it should work across all platforms including web and desktop. However, performance may vary on web due to rendering constraints, so test animations on target devices.

How to prevent animations from running when scrolling in a ListView?

Use the AnimationLimiter widget as a direct parent of your scrollable view. It prevents animations from triggering if children appear after the first frame, as detailed in the API overview section.

What happens if I need custom animation curves or durations?

The package allows overriding duration and delay in each child Animation, but it uses default curves. For custom curves, you might need to extend the animation classes or use additional Flutter animation APIs alongside.

Open-Awesome

Staggered Animations

MITDart1.0.0

A Flutter package for easily adding staggered animations to ListView, GridView, Column, and Row children.

GitHub

1.7k stars130 forks0 contributors

What is Staggered Animations?

Flutter Staggered Animations is a Flutter package that enables developers to easily add staggered animations to common layout widgets like ListView, GridView, Column, and Row. It solves the problem of manually sequencing animations by providing a simple, declarative API that follows Material Design motion guidelines, making apps feel more dynamic and polished.

Target Audience

Flutter developers building mobile or web applications who want to enhance their UI with sequenced animations without complex animation code. It's particularly useful for those following Material Design standards.

Value Proposition

Developers choose this package because it abstracts the complexity of staggered animations into reusable widgets, supports multiple layout types, and includes features like AnimationLimiter to control animation triggers, all while maintaining a lightweight and intuitive API.

Overview

Easily add staggered animations to your ListView, GridView, Column and Row children.

Use Cases

Best For

Adding entrance animations to list items in a Flutter app
Creating Material Design-compliant motion sequences
Animating grid layouts with staggered effects
Enhancing user onboarding flows with sequenced animations
Building visually engaging data displays in ListView or GridView
Implementing animations in Column or Row children without manual delay management

Not Ideal For

Projects requiring complex, non-sequential animations like physics-based or interactive animations
Teams stuck on older Flutter/Dart versions below the minimum SDK requirements (Dart 2.17)
Developers who prefer imperative animation control using Flutter's AnimationController for fine-tuned timelines
Apps needing pre-animated UI components out-of-the-box without wrapping custom widgets

Pros & Cons

Pros

Declarative Simplicity

The package uses a declarative API that integrates seamlessly into Flutter's widget tree, allowing developers to add animations by wrapping widgets without managing complex state or controllers.

Material Design Compliance

It explicitly follows Material Design motion guidelines for sequencing, ensuring animations are consistent with Google's design standards, as stated in the README's philosophy.

Versatile Layout Support

Supports staggered animations for common Flutter widgets like ListView, GridView, Column, and Row, covering a wide range of UI scenarios with dedicated configuration methods.

Animation Composition

Enables combining FadeIn, Slide, Scale, and Flip animations through nesting, allowing for advanced effects without additional packages, as shown in the code examples.

Scroll-Aware Control

Includes AnimationLimiter to prevent animations from triggering during scrolling, ensuring they only run on initial view and improving user experience.

Cons

Version Lock-In Risks

The package has breaking changes for Flutter 3.0 and requires a minimum Dart SDK 2.17, which can create migration hurdles for projects with legacy dependencies.

Limited Animation Scope

It focuses only on staggered entrance animations with four basic types; developers needing exit animations, transforms, or custom curves may find it insufficient.

Widget Tree Overhead

Adding multiple layers of animation widgets increases widget tree depth, which could impact performance in large lists or complex UIs if not optimized.

Frequently Asked Questions

Related Projects

SpinKit

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Stars1,772

Forks320

Last commit8 months ago

Simple Animations

Flutter package for creating awesome animations.

Stars1,062

Forks104

Last commit16 days ago

Funvas

Fun canvas animations in Flutter based on time and math functions.

Stars556

Forks41

Last commit2 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub