Beautiful Flutter Animations: Implicit, Explicit and Hero

Flutter's animation system scales from one-liners to fully orchestrated sequences. Knowing which tool to reach for keeps your code simple while your UI feels premium.

Implicit: Animate With One Widget

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: expanded ? 200 : 100,
  color: expanded ? Colors.green : Colors.blue,
)

Change a property and Flutter tweens it automatically. AnimatedOpacity, AnimatedPadding, and friends cover most everyday motion.

Explicit: Full Control With AnimationController

late final controller = AnimationController(
  vsync: this,
  duration: const Duration(seconds: 1),
)..repeat(reverse: true);

// Drive any widget with controller.value (0.0 → 1.0)

Hero: Shared-Element Transitions

Wrap a widget in Hero(tag: 'x') on two screens and Flutter animates it flying between them during navigation — the classic thumbnail-to-detail effect, free.