[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9451":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":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},9451,"flutter_animate","gskinner\u002Fflutter_animate","gskinner","Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.","",null,"Dart",1097,100,13,34,0,1,8,19.01,"BSD 3-Clause \"New\" or \"Revised\" License",false,"main",true,[],"2026-06-12 02:02:07","[![tests](https:\u002F\u002Fgithub.com\u002Fgskinner\u002Fflutter_animate\u002Factions\u002Fworkflows\u002Ftests.yaml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fgskinner\u002Fflutter_animate\u002Factions\u002Fworkflows\u002Ftests.yaml)\n\n\u003Ca href='https:\u002F\u002Fdocs.flutter.dev\u002Fpackages-and-plugins\u002Ffavorites'>\u003Cimg src='https:\u002F\u002Fraw.githubusercontent.com\u002Fgskinner\u002Fflutter_animate\u002Ffc1feabe2528155ef8e11c96a2d119390f11a9a0\u002Fflutter_favorite.png' alt='Flutter Animate is a Flutter Favorite' width='80'>\u003C\u002Fimg>\u003C\u002Fa>\n\nFlutter Animate\n================================================================================\n\nA performant library that makes it simple to add almost any kind of animated \neffect in Flutter.\n\n1. Pre-built effects like fade, scale, slide, align, flip, blur, shake,\n   shimmer, shadows, crossfades, follow path, and color effects (saturation,\n   color, and tint)\n2. Apply animated GLSL fragment shaders to widgets\n3. Easy custom effects and simplified animated builders\n4. Synchronize animations to scroll, notifiers, or anything\n5. Integrated events\n\nAll via a simple, unified API without fussing with AnimationController and\nStatefulWidget.\n\n![Basic Animations](https:\u002F\u002Fraw.githubusercontent.com\u002Fgskinner\u002Fflutter_animate\u002Fassets\u002FinfoView.gif)\n![Visual Effects](https:\u002F\u002Fraw.githubusercontent.com\u002Fgskinner\u002Fflutter_animate\u002Fassets\u002FvisualView.gif)\n![Synchronized Animations](https:\u002F\u002Fraw.githubusercontent.com\u002Fgskinner\u002Fflutter_animate\u002Fassets\u002FadapterView.gif)\n\n_Above: The included example app._\n\n\nDuration extensions\n----------------------------------------\n\nExtension methods for `num`, to make specifying durations easier. For example:\n`2.seconds`, `0.1.minutes`, or `300.ms`.\n\n\nAnimatedController extensions\n----------------------------------------\n\nA `loop` extension method for `AnimatedController` which is identical to\n`repeat`, but adds a `count` parameter to specifiy how many times to play.\n\n\nBasics\n================================================================================\n\nSyntax\n----------------------------------------\n\nTo apply effects, wrap the target widget in `Animate`, and specify a list of\neffects:\n\n``` dart\nAnimate(\n  effects: [FadeEffect(), ScaleEffect()],\n  child: Text(\"Hello World!\"),\n)\n```\n\nIt also adds an `.animate()` extension method to all widgets, which wraps the\nwidget in `Animate()`. Each effect also adds a chainable extension method to\n`Animate` to enable a shorthand syntax:\n\n``` dart\nText(\"Hello World!\").animate().fade().scale()\n```\n\n> **NOTE:** The shortform style is used in this README, but all functionality is\n> available in either format.\n\nDelay, duration, curve\n----------------------------------------\n\nEffects have optional `delay`, `duration`, and `curve` parameters. Effects run\nin parallel, but you can use a `delay` to run them sequentially:\n\n``` dart\nText(\"Hello\").animate()\n  .fade(duration: 500.ms)\n  .scale(delay: 500.ms) \u002F\u002F runs after fade.\n```\n\nNote that effects are \"active\" for the duration of the full animation, so for\nexample, two fade effects on the same target can have unexpected results\n(`SwapEffect` detailed below, can help address this).\n\nIf not specified (or null), these values are inherited from the previous effect,\nor from `Animate.defaultDuration` and `Animate.defaultCurve` if it is the first\neffect:\n\n``` dart\nText(\"Hello World!\").animate()\n  .fadeIn() \u002F\u002F uses `Animate.defaultDuration`\n  .scale() \u002F\u002F inherits duration from fadeIn\n  .move(delay: 300.ms, duration: 600.ms) \u002F\u002F runs after the above w\u002Fnew duration\n  .blurXY() \u002F\u002F inherits the delay & duration from move\n```\n\n`Animate` has its own `delay` parameter, which defines a delay before the\nanimation begins playing. Unlike the delay on an `Effect`, it is only applied\nonce if the animation repeats.\n\n``` dart\nText(\"Hello\").animate(\n    delay: 1000.ms, \u002F\u002F this delay only happens once at the very start\n    onPlay: (controller) => controller.repeat(), \u002F\u002F loop\n  ).fadeIn(delay: 500.ms) \u002F\u002F this delay happens at the start of each loop\n```\n\nOther Effect Parameters\n----------------------------------------\nMost effects include `begin` and `end` parameters, which specify the start\u002Fend\nvalues. These are usually \"smart\" in the sense that if only one is specified\nthen the other will default to a \"neutral\" value (ie. no visual effect). If\nboth are unspecified the effect should use visually pleasing defaults.\n\n``` dart\n\u002F\u002F an opacity of 1 is \"neutral\"\nText(\"Hello\").animate().fade() \u002F\u002F begin=0, end=1\nText(\"Hello\").animate().fade(begin: 0.5) \u002F\u002F end=1\nText(\"Hello\").animate().fade(end: 0.5) \u002F\u002F begin=1\n```\n\nMany effects have additional parameters that influence their behavior. These\nshould also use pleasant defaults if unspecified.\n\n``` dart\nText('Hello').animate().tint(color: Colors.purple)\n```\n\nSequencing with ThenEffect\n----------------------------------------\n`ThenEffect` is a special convenience \"effect\" that makes it easier to sequence\neffects. It does this by establishing a new baseline time equal to the previous\neffect's end time and its own optional `delay`. All subsequent effect delays are\nrelative to this new baseline.\n\nIn the following example, the slide would run 200ms after the fade ended.\n\n``` dart\nText(\"Hello\").animate()\n  .fadeIn(duration: 600.ms)\n  .then(delay: 200.ms) \u002F\u002F baseline=800ms\n  .slide()\n```\n\nAnimating lists\n----------------------------------------\n\nThe `AnimateList` class offers similar functionality for lists of widgets, with\nthe option to offset each child's animation by a specified `interval`:\n\n``` dart\nColumn(children: AnimateList(\n  interval: 400.ms,\n  effects: [FadeEffect(duration: 300.ms)],\n  children: [Text(\"Hello\"), Text(\"World\"),  Text(\"Goodbye\")],\n))\n\n\u002F\u002F or shorthand:\nColumn(\n  children: [Text(\"Hello\"), Text(\"World\"),  Text(\"Goodbye\")]\n    .animate(interval: 400.ms).fade(duration: 300.ms),\n)\n```\n\nShared effects\n----------------------------------------\n\nBecause `Effect` instances are immutable, they can be reused. This makes it easy\nto create a global collection of effects that are used throughout your app and\nupdated in one place. This is also useful for design systems.\n\n``` dart\nMyGlobalEffects.transitionIn = \u003CEffect>[\n  FadeEffect(duration: 100.ms, curve: Curves.easeOut),\n  ScaleEffect(begin: 0.8, curve: Curves.easeIn)\n]\n\n\u002F\u002F then:\nText('Hello').animate(effects: MyGlobalEffects.transitionIn)\n```\n\n\nCustom effects & builders\n================================================================================\n\nIt is easy to write new resuable effects by extending `Effect`, but you can also\neasily create one-off custom effects by using `CustomEffect`, `ToggleEffect`,\nand `SwapEffect`.\n\nCustomEffect\n----------------------------------------\n\n`CustomEffect` lets you build custom animated effects. Simply specify a\n`builder` function that accepts a `context`, `value`, and `child`. The child is\nthe target of the animation (which may already have been wrapped in other\neffects).\n\nFor example, this would add a background behind the text and fade it from red to\nblue:\n\n``` dart\nText(\"Hello World\").animate().custom(\n  duration: 300.ms,\n  builder: (context, value, child) => Container(\n    color: Color.lerp(Colors.red, Colors.blue, value),\n    padding: EdgeInsets.all(8),\n    child: child, \u002F\u002F child is the Text widget being animated\n  )\n)\n```\n\nBy default it provides a `value` from `0-1` (though some curves can generate\nvalues outside this range), based on the current time, duration, and curve. You\ncan also specify `begin` and `end` values as demonstrated in the example below.\n\n`Animate` can be created without a child, so you use `CustomEffect` as a\nsimplified builder. For example, this would build text counting down from 10,\nand fading out:\n\n``` dart\nAnimate().custom(\n  duration: 10.seconds,\n  begin: 10,\n  end: 0,\n  builder: (_, value, __) => Text(value.round()),\n).fadeOut()\n```\n\n\nToggleEffect\n----------------------------------------\n\n`ToggleEffect` also provides builder functionality, but instead of a `double`,\nit provides a boolean value equal to `true` before the end of the effect and\n`false` after (ie. after its duration).\n\n``` dart\nAnimate().toggle(\n  duration: 2.seconds,\n  builder: (_, value, __) => Text(value ? \"Before\" : \"After\"),\n)\n```\n\nThis can also be used to activate \"Animated\" widgets, like `AnimatedContainer`,\nby toggling their values with a minimal delay:\n\n``` dart\nAnimate().toggle(\n  duration: 1.ms,\n  builder: (_, value, __) => AnimatedContainer(\n    duration: 1.seconds,\n    color: value ? Colors.red : Colors.green,\n  ),\n)\n```\n\nSwapEffect\n----------------------------------------\n\n`SwapEffect` lets you swap out the whole target widget at a specified time:\n\n``` dart\nText(\"Before\").animate()\n  .swap(duration: 900.ms, builder: (_, __) => Text(\"After\"))\n```\n\nThis can also be useful for creating sequential effects, by swapping the target\nwidget back in, effectively wiping all previous effects:\n\n``` dart\ntext.animate().fadeOut(300.ms) \u002F\u002F fade out & then...\n  \u002F\u002F swap in original widget & fade back in via a new Animate:\n  .swap(builder: (_, child) => child.animate().fadeIn())\n```\n\nShaderEffect\n----------------------------------------\n`ShaderEffect` makes it easy to apply animated GLSL fragment shaders to widgets.\nSee the docs for details.\n\n``` dart\nmyWidget.animate()\n  .shader(duration: 2.seconds, shader: myShader)\n  .fadeIn(duration: 300.ms) \u002F\u002F shader can be combined with other effects\n```\n\n\nEvents & callbacks\n================================================================================\n\n`Animate` includes the following callbacks:\n\n- `onInit`: the internal `AnimationController` has been initialized\n- `onPlay`: the animation has started playing after any `Animate.delay`\n- `onComplete`: the animation has finished\n\nThese callbacks return the `AnimationController`, which can be used to\nmanipulate the animation (ex. repeat, reverse, etc).\n\n``` dart\nText(\"Horrible Pulsing Text\")\n  .animate(onPlay: (controller) => controller.repeat(reverse: true))\n  .fadeOut(curve: Curves.easeInOut)\n```\n\nFor more nuanced callbacks, use `CallbackEffect` or `ListenEffect`.\n\nCallbackEffect\n----------------------------------------\n\n`CallbackEffect` lets you add a callback to an arbitrary postion in your\nanimations. For example, adding a callback halfway through a fade:\n\n``` dart\nText(\"Hello\").animate().fadeIn(duration: 600.ms)\n  .callback(duration: 300.ms, callback: (_) => print('halfway'))\n```\n\nAs with other effects, it will inherit the delay and duration of prior effects:\n\n``` dart\nText(\"Hello\").animate().scale(delay: 200.ms, duration: 400.ms)\n  .callback(callback: (_) => print('scale is done'))\n```\n\nListenEffect\n----------------------------------------\n\n`ListenEffect` lets you register a callback to receive the animation value (as a\n`double`) for a given delay, duration, curve, begin, and end.\n\n``` dart\nText(\"Hello\").animate().fadeIn(curve: Curves.easeOutExpo)\n  .listen(callback: (value) => print('current opacity: $value'))\n```\n\nThe above example works, because the listen effect inherits duration and curve\nfrom the fade, and both use `begin=0, end=1` by default.\n\n\nAdapters and Controllers\n================================================================================\n\nBy default, all animations are driven by an internal `AnimationController`, and\nupdate based on elapsed time. For more control, you can specify your own\nexternal `controller`, or use an `adapter`. You can also set `autoPlay=false` if\nyou want to start the animation manually.\n\nAdapters synchronize the `AnimationController` to an external source. For\nexample, the `ScrollAdapter` updates an animation based on a `ScrollController`\nso you can run complex animations based on scroll interactions.\n\nYou still define animations using durations, but the external source must\nprovide a `0-1` value.\n\nFlutter Animate ships with a collection of useful adapters. Check them out for\nmore information.\n\n\nReacting to State Changes\n================================================================================\n`Animate` can react to state changes similar to \"Animated\" widgets (ex.\n`AnimatedOpacity`). Simply set up your animation normally, but set a `target`\nvalue. When the value of `target` changes, it will automatically animate to the \nnew target position (where `0` is the beginning and `1` is the end).\n\nFor example, combined with logic that toggles `_over` via `setState`, this will\nfade and scale the button on roll over:\n\n``` dart\nMyButton().animate(target: _over ? 1 : 0)\n  .fade(end: 0.8).scaleXY(end: 1.1)\n```\n\nYou can also update the `value` property to jump to that position.\n\nTesting Animations\n================================================================================\nWhen testing animations, you can set `Animate.restartOnHotReload=true` which\nwill cause all animations to automatically restart every time you hot reload\nyour app.\n\n\nInstallation\n================================================================================\n\nGrab it from [pub.dev](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_animate\u002Finstall).\n","Flutter Animate 是一个用于在 Flutter 应用中轻松添加各种动画效果的高性能库。它通过简洁统一的 API 提供了包括淡入淡出、缩放、滑动、翻转、模糊、震动等在内的多种预设动画效果，同时支持自定义动画和 GLSL 片段着色器的应用。此外，该库还允许开发者将动画与滚动、通知或其他事件同步，并提供了方便的时间扩展方法以简化持续时间的设置。适用于需要丰富视觉体验且追求开发效率的 Flutter 项目，如移动应用或网页应用的界面设计，尤其适合那些希望快速实现复杂动画而无需深入了解底层动画控制器机制的开发者。",2,"2026-06-11 03:22:55","top_language"]