animating-flutter-widgets

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);