[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9315":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},9315,"flutter_staggered_animations","The-ring-io\u002Fflutter_staggered_animations","The-ring-io","Easily add staggered animations to your ListView, GridView, Column and Row children.","",null,"Dart",1677,130,17,10,0,1,54.45,"MIT License",false,"master",true,[],"2026-06-12 04:00:44","[![Pub](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fflutter_staggered_animations)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_staggered_animations)\n\n# Flutter Staggered Animations\n\nEasily add staggered animations to your `ListView`, `GridView`, `Column` and `Row` children as shown in [Material Design guidelines](https:\u002F\u002Fmaterial.io\u002Fdesign\u002Fmotion\u002Fcustomization.html#sequencing)\n\n## Showcase\n\n| ListView                  | GridView                   | Column                       |\n| ---                       | ---                        | ---                          |\n|![](https:\u002F\u002Fgithub.com\u002Fmobiten\u002Fflutter_staggered_animations\u002Fblob\u002Fmaster\u002Fassets\u002Fcard_list.gif?raw=true)  | ![](https:\u002F\u002Fgithub.com\u002Fmobiten\u002Fflutter_staggered_animations\u002Fblob\u002Fmaster\u002Fassets\u002Fcard_grid.gif?raw=true)  | ![](https:\u002F\u002Fgithub.com\u002Fmobiten\u002Fflutter_staggered_animations\u002Fblob\u002Fmaster\u002Fassets\u002Fcard_column.gif?raw=true)  |\n\n## Flutter 3.0 and breaking changes\n\nStarting version 1.1.0 `flutter_staggered_animations` requires Dart SDK 2.17 minimum.\nIf you want to keep using `flutter_staggered_animations` but cannot migrate to Dart SDK 2.17 yet, use the version 1.0.0 instead.\n\n## Flutter 2.0 and null-safety\n\nFrom 1.0.0 and onwards, `flutter_staggered_animations` is null-safe and requires Dart SDK 2.12.0 minimum.\nIf you want to keep using `flutter_staggered_animations` but cannot migrate to null-safety yet, use the version 0.1.3 instead.\n\n## Installation\n\n### Dependency\nAdd the package as a dependency in your pubspec.yaml file.\n```yaml\ndependencies:\n  flutter_staggered_animations: ^1.0.0\n```\n\n### Import\nImport the package in your code file.\n```dart\nimport 'package:flutter_staggered_animations\u002Fflutter_staggered_animations.dart';\n```\n\n## Basic usage\nHere is a sample code to apply a staggered animation on `ListView` items.\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: AnimationLimiter(\n      child: ListView.builder(\n        itemCount: 100,\n        itemBuilder: (BuildContext context, int index) {\n          return AnimationConfiguration.staggeredList(\n            position: index,\n            duration: const Duration(milliseconds: 375),\n            child: SlideAnimation(\n              verticalOffset: 50.0,\n              child: FadeInAnimation(\n                child: YourListChild(),\n              ),\n            ),\n          );\n        },\n      ),\n    ),\n  );\n}\n```\n\n\n## API Overview\n\nThis package contains three type of classes:\n- Animation\n- AnimationConfiguration\n- AnimationLimiter\n\n\n### Animations\n\nAnimations are split into 4 classes: \n- `FadeInAnimation`\n- `SlideAnimation`\n- `ScaleAnimation`\n- `FlipAnimation`\n\nAnimations can be composed to produce advanced animations effects by wrapping them.\n\nExample of a SlideAnimation combined with a FadeInAnimation:\n```dart\nchild: SlideAnimation(\n  verticalOffset: 50.0,\n    child: FadeInAnimation(\n      child: YourListChild(),\n    ),\n)\n```\n\nAnimations must be direct children of `AnimationConfiguration`.\n\n\n### AnimationConfiguration  \n\n`AnimationConfiguration` is an `InheritedWidget` that shares its animation settings with its children (mainly duration and delay).\n\n#### Named constructors\n\nDepending on the scenario in which you will present your animations, you should use one of `AnimationConfiguration`'s named constructors. \n\n- `AnimationConfiguration.synchronized` if you want to launch all children's animations at the same time.\n- `AnimationConfiguration.staggeredList` if you want to delay the animation of each child to produce a single-axis staggered animations (from top to bottom or from left to right).\n- `AnimationConfiguration.staggeredGrid` if you want to delay the animation of each child to produce a dual-axis staggered animations (from left to right and top to bottom).\n\nIf you're not in the context of a `ListView` or `GridView`, an utility static method is available to help you apply staggered animations to the children of a `Row` or `Column`:\n\n- `AnimationConfiguration.toStaggeredList`\n\n> You can override `duration` and `delay` in each child Animation if needed.\n\n\n### AnimationLimiter\n\nIn the context of a scrollable view, your children's animations are only built when the user scrolls and they appear on the screen.\nThis create a situation where your animations will be run as you scroll through the content. If this is not a behaviour you want in your app, you can use `AnimationLimiter`.\n\n`AnimationLimiter` is an `InheritedWidget` that prevents the children widgets to be animated if they don't appear in the first frame where `AnimationLimiter` is built.\n\nTo be effective, `AnimationLimiter` must be a direct parent of your scrollable list of widgets.\n\n> You can omit `AnimationLimiter` if your view is not scrollable.\n\n##  Quick samples \n\n### ListView\n\nHere is a sample code to apply a staggered animation on the children of a `ListView`.\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: AnimationLimiter(\n      child: ListView.builder(\n        itemCount: 100,\n        itemBuilder: (BuildContext context, int index) {\n          return AnimationConfiguration.staggeredList(\n            position: index,\n            duration: const Duration(milliseconds: 375),\n            child: SlideAnimation(\n              verticalOffset: 50.0,\n              child: FadeInAnimation(\n                child: YourListChild(),\n              ),\n            ),\n          );\n        },\n      ),\n    ),\n  );\n}\n```\n\n### GridView\n\nHere is a sample code to apply a staggered animation on the children of a `GridView`.\n\n```dart\n@override\nWidget build(BuildContext context) {\n  int columnCount = 3;\n\n  return Scaffold(\n    body: AnimationLimiter(\n      child: GridView.count(\n        crossAxisCount: columnCount,\n        children: List.generate(\n          100,\n          (int index) {\n            return AnimationConfiguration.staggeredGrid(\n              position: index,\n              duration: const Duration(milliseconds: 375),\n              columnCount: columnCount,\n              child: ScaleAnimation(\n                child: FadeInAnimation(\n                  child: YourListChild(),\n                ),\n              ),\n            );\n          },\n        ),\n      ),\n    ),\n  );\n}\n```\n\n### Column\n\nHere is a sample code to apply a staggered animation on the children of a `Column`.\n\n```dart\n@override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: SingleChildScrollView(\n        child: AnimationLimiter(\n          child: Column(\n            children: AnimationConfiguration.toStaggeredList(\n              duration: const Duration(milliseconds: 375),\n              childAnimationBuilder: (widget) => SlideAnimation(\n                horizontalOffset: 50.0,\n                child: FadeInAnimation(\n                  child: widget,\n                ),\n              ),\n              children: YourColumnChildren(),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n```\n\n## License\n\nFlutter Staggered Animations is released under the [MIT License](LICENSE)\n\n## About us\n\nAs of July 2022, this package is maintained by the front team working on the french mobile application [Dailyn](https:\u002F\u002Fwww.dailyn.app) ","该项目旨在为Flutter应用中的ListView、GridView、Column和Row子元素轻松添加交错动画效果。其核心功能包括多种动画类型如淡入、滑动、缩放及翻转，并通过AnimationConfiguration和AnimationLimiter类来控制这些动画的执行顺序与时长，遵循Material Design指南推荐的最佳实践。适用于需要增强用户界面动态性和吸引力的各种移动或桌面应用程序场景中，特别是在展示列表项时希望提供流畅视觉体验的情况下。项目采用Dart语言编写，支持最新的Flutter版本特性，如空安全等。",2,"2026-06-11 03:22:07","top_language"]