animating-flutter-widgets

name	animating-flutter-widgets
description	Declarative animation patterns using flutter_animate v4.5.x with composable effects (fade, scale, slide, shimmer, shake, blur), GLSL fragment shaders, and scroll-synchronized animations. Use this skill for adding UI animations and transitions, building staggered or sequenced effects, creating custom animation effects, fixing animation jank or performance issues, implementing shimmer loading states, or adding scroll-driven animations. Supports delays, curves, adaptive effects, and easy extension method chaining (.animate()).
metadata	{"last_modified":"2026-04-01 14:35:00 (GMT+8)"}

Flutter Animate Implementation (v4.5.x)

Goal

Implement performant, composable, and declarative animations in Flutter using the flutter_animate package. The goal is to reduce boilerplate by using .animate() extension methods on widgets rather than manually orchestrating AnimationController and StatefulWidget mechanics.

Instructions

1. The Core Extension Syntax

Prefer the .animate() extension method on any widget over explicit Animate builder blocks.

Correct Usage:

// 🌟 Best Practice: Extension chaining
Text("Hello World!")
  .animate()
  .fade(duration: 500.ms)
  .scale(curve: Curves.easeOutBack);

Avoid (unless strictly necessary):

// ❌ Avoid explicit nesting unless building a highly complex reusable list
Animate(
  effects: [FadeEffect(), ScaleEffect()],
  child: Text("Hello World!"),
)

2. Time Extensions (num)

Always use the provided num extensions for Duration assignments. This improves readability.

• 500.ms (Milliseconds)
• 2.seconds (Seconds)
• 1.5.minutes (Minutes)

3. Orchestration & Sequencing (.then())

When effects need to run sequentially rather than in parallel, use the .then() pseudo-effect. It establishes a new baseline time equal to the previous effect's completion time.

Column(
  children: [
    Text("Step 1").animate().fadeIn(duration: 400.ms).slideX(),
    Text("Step 2").animate()
      .fadeIn(duration: 400.ms)
      .then(delay: 200.ms) // Step 2 slides 200ms AFTER its own fade completes
      .slideY(),
  ],
)

4. Reactive State Animations (target)

The most powerful feature of flutter_animate. Completely eliminate AnimatedContainer or AnimatedOpacity by using the target property. When target: 1, the animation rests at its end values. When target: 0, the animation reverses cleanly to its begin values.

// Inside a build method that listens to State or Riverpod
bool isHovered = ref.watch(hoverStateProvider);

MyButton()
  .animate(target: isHovered ? 1 : 0) // 🌟 Drives the animation entirely by State
  .fade(end: 0.8)
  .scaleXY(end: 1.1, curve: Curves.easeOutExpo);

5. Infinite Loops & Callbacks

To repeat an animation indefinitely, utilize the onPlay callback to manipulate the internal controller.

Icon(Icons.warning)
  .animate(onPlay: (controller) => controller.repeat(reverse: true))
  .fadeOut(curve: Curves.easeInOut);

6. Value Listeners & Custom Effects

If you need to extract the raw 0.0 to 1.0 double value (e.g. to drive a custom painter or a complex color lerp), use .listen() or .custom().

Listen (Side-Effects):

Text("Hello").animate().fadeIn(duration: 1.seconds)
  .listen(callback: (value) => print('Current alpha: $value'));

CustomEffect (Building from interpolation):

Text("Color Shift").animate().custom(
  duration: 300.ms,
  builder: (context, value, child) => Container(
    // Extrapolates colors cleanly entirely within the animation pipeline
    color: Color.lerp(Colors.red, Colors.blue, value),
    child: child, 
  )
);

7. Logical Toggles & UI Swapping

• ToggleEffect: Yields a bool based on whether the animation has finished its duration. Useful for flipping raw properties (like AbsorbPointer locks).
• SwapEffect: Replaces the entire rendered Widget at the very end of the animation timeline.

// The button fades out, and is instantly replaced by a Loader widget when the fade completes.
SubmitButton().animate()
  .fadeOut(duration: 300.ms)
  .swap(builder: (context, child) => const CircularProgressIndicator());

Constraints

• Extension Priority: Always default to the .animate() extension chaining syntax for generating animations unless directly generating an AnimateList.
• State Simplicity: Do not define AnimationController inside a StatefulWidget if the goal can be solely achieved using flutter_animate's target: or onPlay: properties.
• Reuse Effects: If building a Design System, extract List<Effect> arrays into global constants to guarantee application-wide transition consistency.