Module 16: Animations -- Making Your UI Come Alive

Implicit Animations -- The Easy Path

Implicit animations are Flutter's gift to developers who want beautiful motion without the complexity. You tell Flutter the target value and how long the transition should take. Flutter figures out everything in between.

AnimatedContainer

AnimatedContainer is the Swiss Army knife of implicit animations. It can animate size, color, padding, margin, border radius, alignment -- basically any property that Container supports.

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  width: _isExpanded ? 300 : 100,
  height: _isExpanded ? 300 : 100,
  color: _isExpanded ? Colors.blue : Colors.red,
  child: const Center(child: Text('Tap me')),
)

When _isExpanded changes from false to true, the container smoothly grows from 100x100 to 300x300 and shifts from red to blue over 500 milliseconds. You did not write any animation code. You just changed the values and Flutter handled the rest.

AnimatedOpacity

Fading things in and out is one of the most common animations in any app:

AnimatedOpacity(
  duration: const Duration(milliseconds: 300),
  opacity: _isVisible ? 1.0 : 0.0,
  child: const Text('Now you see me'),
)

AnimatedAlign

Smoothly repositions a child within its parent:

AnimatedAlign(
  duration: const Duration(milliseconds: 400),
  alignment: _isLeft ? Alignment.centerLeft : Alignment.centerRight,
  child: const Icon(Icons.arrow_forward),
)

AnimatedCrossFade

Cross-fades between two completely different widgets:

AnimatedCrossFade(
  duration: const Duration(milliseconds: 300),
  firstChild: const Icon(Icons.play_arrow, size: 48),
  secondChild: const Icon(Icons.pause, size: 48),
  crossFadeState: _isPlaying
      ? CrossFadeState.showSecond
      : CrossFadeState.showFirst,
)

This is perfect for toggling between two states -- play/pause icons, on/off labels, expand/collapse indicators.

Animation Curves

Every implicit animation accepts a curve parameter that controls the feel of the motion:

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,  // Start slow, speed up, slow down
  // ...
)

Common curves and when to use them:

• Curves.easeInOut -- the default for most UI animations. Smooth start and end.
• Curves.easeIn -- starts slow, ends fast. Good for things exiting the screen.
• Curves.easeOut -- starts fast, ends slow. Good for things entering the screen.
• Curves.bounceOut -- bounces at the end. Fun for playful UI elements.
• Curves.elasticOut -- overshoots then settles. Spring-like feel.
• Curves.linear -- constant speed. Feels robotic. Rarely what you want for UI.

Hero Transitions Between Screens

// Screen A -- the thumbnail
Hero(
  tag: 'avatar-1',
  child: CircleAvatar(
    radius: 30,
    backgroundImage: NetworkImage(imageUrl),
  ),
)

// Screen B -- the full-size image
Hero(
  tag: 'avatar-1',
  child: CircleAvatar(
    radius: 100,
    backgroundImage: NetworkImage(imageUrl),
  ),
)

The tag must be identical on both screens. When Navigator.push triggers, Flutter finds the matching tags and animates between them automatically.

Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => DetailScreen(imageUrl: imageUrl)),
);

Hero transitions are powerful because they create a visual connection between screens. The user sees the thumbnail transform into the detail view, which reinforces the mental model of "I tapped that image and now I am looking at it up close."

Rules for Hero transitions: - Tags must be unique within each screen - Both Hero widgets must be visible when the navigation happens - The child widgets do not need to be identical -- Flutter interpolates between them

AnimatedList -- Smooth Insertions and Removals

A regular ListView just... updates. Items appear and disappear instantly. AnimatedList lets you animate items as they enter and leave.

final _listKey = GlobalKey<AnimatedListState>();
final _items = <String>[];

void _addItem(String item) {
  _items.insert(0, item);
  _listKey.currentState?.insertItem(
    0,
    duration: const Duration(milliseconds: 300),
  );
}

void _removeItem(int index) {
  final removed = _items.removeAt(index);
  _listKey.currentState?.removeItem(
    index,
    (context, animation) => SizeTransition(
      sizeFactor: animation,
      child: ListTile(title: Text(removed)),
    ),
    duration: const Duration(milliseconds: 300),
  );
}

The widget itself uses itemBuilder with an animation parameter:

AnimatedList(
  key: _listKey,
  initialItemCount: _items.length,
  itemBuilder: (context, index, animation) {
    return SlideTransition(
      position: animation.drive(
        Tween(begin: const Offset(1, 0), end: Offset.zero),
      ),
      child: ListTile(title: Text(_items[index])),
    );
  },
)

The critical thing to understand: you must call insertItem and removeItem on the AnimatedListState in addition to modifying your data list. The AnimatedList does not watch your list -- you have to tell it explicitly when items come and go.

Explicit Animations -- Full Control

Sometimes you need more control than implicit animations provide. Maybe you want an animation that repeats forever, or one that plays in response to a specific trigger, or a complex sequence of chained animations. That is where explicit animations come in.

class PulseWidget extends StatefulWidget {
  @override
  State<PulseWidget> createState() => _PulseWidgetState();
}

class _PulseWidgetState extends State<PulseWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat(reverse: true);

    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.3).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _scaleAnimation,
      child: const Icon(Icons.favorite, color: Colors.red, size: 48),
    );
  }
}

The pieces of an explicit animation:

1. AnimationController -- the engine. Controls timing, duration, playback direction. Must be disposed.
2. SingleTickerProviderStateMixin -- provides the vsync parameter that ties the animation to the screen refresh rate.
3. Tween -- defines the range of values (e.g., scale from 1.0 to 1.3).
4. CurvedAnimation -- applies an easing curve to the tween.
5. Transition widget -- ScaleTransition, FadeTransition, SlideTransition, RotationTransition -- applies the animated value to a child widget.

Controller methods: - .forward() -- play once - .reverse() -- play backwards - .repeat() -- loop forever - .repeat(reverse: true) -- ping-pong loop - .stop() -- pause - .reset() -- jump to the beginning

When to Use Explicit vs. Implicit

Putting It All Together: An AnimatedToggleCard

Let us walk through a realistic widget that combines several implicit animations into one cohesive component:

class AnimatedToggleCard extends StatefulWidget {
  final String title;
  final IconData icon;
  final Color activeColor;

  const AnimatedToggleCard({
    super.key,
    required this.title,
    required this.icon,
    this.activeColor = Colors.blue,
  });

  @override
  State<AnimatedToggleCard> createState() => _AnimatedToggleCardState();
}

class _AnimatedToggleCardState extends State<AnimatedToggleCard> {
  bool _isActive = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _isActive = !_isActive),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 400),
        curve: Curves.easeInOut,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: _isActive
              ? widget.activeColor.withOpacity(0.15)
              : Colors.grey.shade100,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            AnimatedContainer(
              duration: const Duration(milliseconds: 400),
              curve: Curves.easeInOut,
              child: Icon(
                widget.icon,
                size: _isActive ? 36 : 24,
                color: _isActive ? widget.activeColor : Colors.grey,
              ),
            ),
            const SizedBox(width: 16),
            Expanded(child: Text(widget.title)),
            AnimatedCrossFade(
              duration: const Duration(milliseconds: 300),
              firstChild: const Text('OFF',
                  style: TextStyle(color: Colors.grey)),
              secondChild: Text('ON',
                  style: TextStyle(color: widget.activeColor,
                      fontWeight: FontWeight.bold)),
              crossFadeState: _isActive
                  ? CrossFadeState.showSecond
                  : CrossFadeState.showFirst,
            ),
          ],
        ),
      ),
    );
  }
}

This single widget uses three different implicit animations simultaneously:

1. AnimatedContainer for the background color transition
2. AnimatedContainer for the icon size and color transition
3. AnimatedCrossFade for the ON/OFF label swap

They all run in parallel because they all respond to the same _isActive state change. The user sees one smooth, coordinated animation. You wrote zero animation math.

There Are No Dumb Questions

Q: Do animations hurt performance?

A: Flutter's animation system is designed to run at 60fps (or 120fps on newer devices). Implicit animations and transition widgets are highly optimized. Problems only arise when you animate things that trigger expensive layout recalculations -- like animating the width of a widget inside a complex nested layout. For most cases, performance is not a concern.

Q: Why does AnimationController need vsync?

A: vsync ties the animation to the display's refresh rate. Without it, the controller would tick as fast as possible, wasting battery and CPU. With vsync, it ticks exactly once per frame -- no more, no less.

Q: Can I combine multiple implicit animations on the same widget?

A: Yes. AnimatedContainer can animate size, color, padding, margin, and border radius all at the same time. If you need to animate properties from different widgets (say, opacity AND position), nest AnimatedOpacity inside AnimatedAlign.

Q: What is the difference between tester.pump() and tester.pumpAndSettle() when testing animations?

A: pump() advances one frame. pumpAndSettle() pumps frames repeatedly until all animations finish. Use pumpAndSettle() when you want to skip to the end of an animation in a test.

📝 Module Quiz

Test what you learned. 45 seconds per question. Passing score is set per module. Your best attempt is saved in your browser so you can track progress -- nothing is sent to a server.

Sharpen Your Pencil

Exercise 1: AnimatedSettingsPanel

Build an AnimatedToggleCard with animated color, icon size, and an ON/OFF cross-fade. Then compose multiple toggle cards into an AnimatedSettingsPanel screen with:

• A header that fades in on screen load using AnimatedOpacity
• At least 4 toggle cards (Dark Mode, Notifications, Location, Auto-Update)
• A Save button that animates from full-width to a small circle with a checkmark cross-fade
• An AnimatedAlign that shifts the header when any setting is toggled

Exercise 2: Hero Image Gallery

Build an ImageGalleryScreen with a grid of at least 6 images (use https://picsum.photos/seed/imgN/200/200 for placeholders). Each image is wrapped in a Hero widget. Tapping an image navigates to an ImageDetailScreen where the image flies to full size via the Hero transition. Add an AnimatedOpacity fade-in for the title text on the detail screen.

Exercise 3: AnimatedTaskList

Build an AnimatedTaskList screen using AnimatedList:

• A TextField and Add button that inserts items with a slide-in animation
• Each item has a delete button that triggers a fade-out and shrink removal
• A "Clear All" button that removes items one by one with a 100ms stagger for a cascading effect
• An empty-state message that fades in and out based on whether the list has items