Implicit Animations Reference

Implicit animations automatically handle animations when widget properties change. No AnimationController or explicit state management needed.

Core Concept

Implicitly animated widgets extend ImplicitlyAnimatedWidget. When you change a property (color, size, etc.), the widget automatically animates to the new value using a specified duration and curve.

Available Widgets

AnimatedContainer

Animates multiple properties simultaneously.

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: _expanded ? 200 : 100,
  height: _expanded ? 200 : 100,
  decoration: BoxDecoration(
    color: _expanded ? Colors.blue : Colors.red,
    borderRadius: BorderRadius.circular(_expanded ? 20 : 8),
  ),
  child: const FlutterLogo(),
)

Animatable properties:

• width, height - Size
• color - Background color
• decoration - BoxDecoration (includes border, shadow, image, etc.)
• padding - Padding
• margin - Margin (via decoration)
• transform - Matrix4 transformation

AnimatedOpacity

Fades a widget in and out.

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  onEnd: () => print('Animation complete'),
  child: const Text('Hello'),
)

AnimatedPadding

Animates padding changes.

AnimatedPadding(
  padding: EdgeInsets.all(_padded ? 16.0 : 8.0),
  duration: const Duration(milliseconds: 300),
  curve: Curves.ease,
  child: const Card(child: Text('Padded content')),
)

AnimatedPositioned

Animates position within a Stack.

Stack(
  children: [
    AnimatedPositioned(
      top: _top ? 0 : 100,
      left: _left ? 0 : 100,
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeInOut,
      child: const FlutterLogo(),
    ),
  ],
)

AnimatedAlign

Animates alignment changes.

AnimatedAlign(
  alignment: _aligned ? Alignment.topLeft : Alignment.bottomRight,
  duration: const Duration(milliseconds: 400),
  curve: Curves.easeInOut,
  child: const Text('Align me'),
)

AnimatedContainer (Multiple Properties)

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  transform: Matrix4.rotationZ(_rotated ? 0.5 : 0),
  child: const FlutterLogo(),
)

TweenAnimationBuilder

Custom tween animation without creating a custom widget.

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0, end: 1),
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  builder: (context, value, child) {
    return Opacity(
      opacity: value,
      child: Transform.scale(
        scale: value,
        child: child,
      ),
    );
  },
  child: const FlutterLogo(),
)

AnimatedSwitcher

Cross-fades between two widgets.

AnimatedSwitcher(
  duration: const Duration(milliseconds: 300),
  transitionBuilder: (Widget child, Animation<double> animation) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  },
  child: _showFirst
      ? const Text('First')
      : const Text('Second'),
)

With custom size transition:

AnimatedSwitcher(
  duration: const Duration(milliseconds: 500),
  transitionBuilder: (Widget child, Animation<double> animation) {
    return SizeTransition(
      sizeFactor: animation,
      axis: Axis.vertical,
      child: child,
    );
  },
  child: _expanded
      ? const Text('Expanded content')
      : const Text('Collapsed content'),
)

AnimatedDefaultTextStyle

Animates text style changes.

AnimatedDefaultTextStyle(
  duration: const Duration(milliseconds: 300),
  style: TextStyle(
    fontSize: _large ? 32 : 16,
    color: _colored ? Colors.blue : Colors.black,
    fontWeight: _bold ? FontWeight.bold : FontWeight.normal,
  ),
  child: const Text('Animated text'),
)

AnimatedPhysicalModel

Animates elevation, color, and shape with physical shadow.

AnimatedPhysicalModel(
  duration: const Duration(milliseconds: 300),
  shape: BoxShape.rectangle,
  elevation: _elevated ? 12 : 0,
  color: _elevated ? Colors.blue : Colors.grey[300]!,
  borderRadius: BorderRadius.circular(12),
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Physical model'),
  ),
)

AnimatedTheme

Animates theme changes.

AnimatedTheme(
  duration: const Duration(milliseconds: 500),
  data: ThemeData(
    brightness: _darkMode ? Brightness.dark : Brightness.light,
    primaryColor: _darkMode ? Colors.blue[700] : Colors.blue,
  ),
  child: const MyChildWidget(),
)

Common Parameters

All implicit animations support these parameters:

AnimatedContainer(
  duration: Duration(milliseconds: 300),  // Required: Animation duration
  curve: Curves.easeInOut,                 // Optional: Animation curve
  onEnd: () {},                           // Optional: Completion callback
  child: Widget(),                           // The child widget to animate
)

Duration

const Duration(milliseconds: 300)  // 0.3 seconds
const Duration(seconds: 1)          // 1 second
const Duration(days: 1)               // 1 day

Curves

Common curves from Curves class:

Curves.linear        // Linear (no easing)
Curves.ease          // Simple ease in and out
Curves.easeIn        // Slow start, fast end
Curves.easeOut       // Fast start, slow end
Curves.easeInOut     // Slow start and end, fast middle
Curves.easeInCubic   // Cubic ease in
Curves.easeOutCubic  // Cubic ease out
Curves.easeInOutCubic // Cubic ease in and out
Curves.elasticIn     // Bounces in
Curves.elasticOut    // Bounces out
Curves.elasticInOut  // Bounces in and out
Curves.bounceIn      // Bounces in (more subtle)
Curves.bounceOut     // Bounces out (more subtle)

Custom curve:

class ShakeCurve extends Curve {
  @override
  double transform(double t) => sin(t * pi * 2);
}

// Usage
AnimatedContainer(
  curve: ShakeCurve(),
  // ...
)

onEnd Callback

Trigger action when animation completes:

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 300),
  onEnd: () {
    if (!_visible) {
      // Animation finished fading out
      // Remove widget, navigate, etc.
    }
  },
  child: const Text('Hello'),
)

Best Practices

DO

• Use implicit animations for simple, one-off animations
• Set appropriate durations for natural feel (200-500ms typical)
• Use curves to make animations feel natural
• Use onEnd callback for post-animation actions
• Test animations on various devices
• Consider MediaQuery.disableAnimations for accessibility

DON'T

• Use implicit animations for complex, multi-property sequences (use staggered instead)
• Forget to set duration (defaults to instant change)
• Use extremely long durations (> 1s) without good reason
• Animate too many properties simultaneously (performance impact)
• Nest implicit animations deeply (can cause jank)

Performance Tips

• Implicit animations are optimized but still rebuild during animation
• Avoid animating complex widget trees
• Use RepaintBoundary around animated children to isolate repaints
• Test performance with Flutter DevTools Performance overlay
• Consider using AnimatedBuilder for complex widgets to minimize rebuilds

Debugging

Slow Animations

// Slow all animations by 10x during development
timeDilation = 10.0;

Show Repaint Rainbows

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

Performance Overlay

void main() {
  runApp(MyApp());
}

// In debug mode, press 'p' to toggle performance overlay

Comparison: Implicit vs Explicit

When to Use Implicit Animations

Use implicit animations when:

• Animating a single property
• Animation is triggered by state change
• No need for fine-grained control
• Want simple, declarative code
• Animation is one-time or simple toggle

Use explicit animations when:

• Need full control over animation lifecycle
• Animating multiple properties
• Need to react to animation state
• Creating reusable animation components
• Need complex timing or sequencing
• Performance is critical