Scaleup Guide
Beautiful Flutter Animations: Implicit, Explicit and Hero
In this guide
A simple overview of Beautiful Flutter Animations: Implicit, Explicit and Hero. Learn what it means, when it helps, and what to check first.
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.
Pick the Lightest Tool
Reach for implicit animations first. Only drop to an AnimationController when you need repetition, chaining, or to drive multiple widgets from one timeline.