Staggered animations in Flutter - Mini App: Build & Ship

Build: Staggered Animation Demo

This screen shows a box that changes its size, color, and position one after another in a smooth staggered animation.

Target UI

┌───────────────────────────────┐
│ Staggered Animation Demo       │
│                               │
│       [Animated Box]           │
│                               │
│   [Start Animation Button]    │
└───────────────────────────────┘

Display a square box in the center of the screen.

Add a button labeled 'Start Animation' below the box.

When the button is pressed, animate the box with staggered effects:

1. Move the box horizontally from left to right.

2. Change the box color from blue to red.

3. Increase the box size from 100x100 to 200x200 pixels.

Each animation should start after the previous one finishes.

Use Flutter's AnimationController and Tween animations.

Ensure the animations run smoothly and sequentially.

Starter Code

Flutter

import 'package:flutter/material.dart';

class StaggeredAnimationDemo extends StatefulWidget {
  @override
  _StaggeredAnimationDemoState createState() => _StaggeredAnimationDemoState();
}

class _StaggeredAnimationDemoState extends State<StaggeredAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 6),
      vsync: this,
    );
    // TODO: Define animations here
  }

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

  void _startAnimation() {
    // TODO: Start the staggered animation sequence
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Staggered Animation Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Animated box widget
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: _startAnimation,
              child: const Text('Start Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class StaggeredAnimationDemo extends StatefulWidget {
  @override
  _StaggeredAnimationDemoState createState() => _StaggeredAnimationDemoState();
}

class _StaggeredAnimationDemoState extends State<StaggeredAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _positionAnimation;
  late Animation<Color?> _colorAnimation;
  late Animation<double> _sizeAnimation;

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

    _positionAnimation = Tween<double>(begin: -100, end: 100).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.0, 0.33, curve: Curves.easeInOut),
      ),
    );

    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.34, 0.66, curve: Curves.easeInOut),
      ),
    );

    _sizeAnimation = Tween<double>(begin: 100, end: 200).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.67, 1.0, curve: Curves.easeInOut),
      ),
    );
  }

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

  void _startAnimation() {
    _controller.reset();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Staggered Animation Demo')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return Transform.translate(
                  offset: Offset(_positionAnimation.value, 0),
                  child: Container(
                    width: _sizeAnimation.value,
                    height: _sizeAnimation.value,
                    color: _colorAnimation.value,
                  ),
                );
              },
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: _startAnimation,
              child: const Text('Start Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

We use a single AnimationController with a 6-second duration to control all animations.

Three animations are created with Tween and ColorTween, each assigned a part of the total duration using Interval:

• Position: Moves the box horizontally from -100 to 100 pixels in the first third (0.0 to 0.33).
• Color: Changes from blue to red in the middle third (0.34 to 0.66).
• Size: Grows from 100 to 200 pixels in the last third (0.67 to 1.0).

The AnimatedBuilder rebuilds the box whenever the controller ticks, applying the current animation values for position, color, and size.

The _startAnimation method resets and starts the controller to run the staggered animations in sequence.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Staggered Animation Demo       │
│                               │
│       [■]                     │
│                               │
│   [Start Animation Button]    │
└───────────────────────────────┘

When the user taps 'Start Animation', the box moves smoothly from left to right.

After moving, the box color changes from blue to red.

Finally, the box grows bigger from 100x100 to 200x200 pixels.

All animations happen one after another in a smooth sequence.

Stretch Goal

Add a reset button that returns the box to its original position, color, and size instantly.

💡 Hint

Use _controller.reset() and setState to update the UI immediately.

Practice

1. What is the main purpose of using staggered animations in Flutter?

easy

A. To run multiple animations one after another with delays

B. To run all animations at the same time without delay

C. To stop animations from running automatically

D. To create static UI elements without animation

Solution

1. Step 1: Understand staggered animation concept

   Staggered animations run animations sequentially with delays between them.

2. Step 2: Compare options with concept

   Only To run multiple animations one after another with delays describes running animations one after another with delays.

3. Final Answer:

   To run multiple animations one after another with delays -> Option A

4. Quick Check:

   Staggered animations = sequential with delays [OK]

Hint: Remember staggered means animations start one after another [OK]

Common Mistakes:

• Thinking staggered means all animations run together
• Confusing staggered with stopping animations
• Assuming staggered animations create static UI

2. Which Flutter class is used to control the timing of each animation in a staggered animation?

easy

A. Tween

B. AnimationController

C. Interval

D. AnimatedBuilder

Solution

1. Step 1: Identify timing control in staggered animations

   The Interval class defines when each animation runs inside the total duration.

2. Step 2: Match classes with their roles

   Tween defines value changes, AnimationController controls animation progress, AnimatedBuilder rebuilds UI. Only Interval controls timing segments.

3. Final Answer:

   Interval -> Option C

4. Quick Check:

   Interval controls animation timing [OK]

Hint: Interval sets animation start and end times inside total duration [OK]

Common Mistakes:

• Confusing Tween with timing control
• Using AnimationController for timing intervals
• Thinking AnimatedBuilder controls timing

3. Given this code snippet, what will be the start time of the second animation if the total duration is 4 seconds?

final animation1 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.0, 0.5),
  ),
);
final animation2 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.5, 1.0),
  ),
);

medium

A. 0 seconds

B. 1 second

C. 4 seconds

D. 2 seconds

Solution

1. Step 1: Understand Interval values and total duration

   Interval(0.5, 1.0) means the animation starts at 50% of total duration.

2. Step 2: Calculate start time

   50% of 4 seconds = 0.5 * 4 = 2 seconds.

3. Final Answer:

   2 seconds -> Option D

4. Quick Check:

   Interval start 0.5 x 4s = 2s [OK]

Hint: Multiply Interval start by total duration for start time [OK]

Common Mistakes:

• Using Interval end value as start time
• Confusing percentage with seconds directly
• Ignoring total duration in calculation

4. What is wrong with this staggered animation code snippet?

final animation1 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.6, 0.4),
  ),
);

medium

A. Tween begin and end values are reversed

B. Interval start value is greater than end value

C. AnimationController is missing

D. CurvedAnimation cannot be used with Tween

Solution

1. Step 1: Check Interval parameters

   Interval requires start value less than end value. Here start=0.6, end=0.4 which is invalid.

2. Step 2: Verify other parts

   Tween values are valid, AnimationController is parent, CurvedAnimation usage is correct.

3. Final Answer:

   Interval start value is greater than end value -> Option B

4. Quick Check:

   Interval start must be less than end [OK]

Hint: Interval start must be less than end value [OK]

Common Mistakes:

• Swapping Interval start and end values
• Assuming Tween values cause error
• Missing AnimationController parent

5. You want to create a staggered animation with three animations each lasting 1 second, running one after another in a total 3-second controller duration. Which Interval values correctly define the timing for the third animation?

hard

A. Interval(0.66, 1.0)

B. Interval(0.33, 0.66)

C. Interval(0.0, 0.33)

D. Interval(0.5, 1.0)

Solution

1. Step 1: Divide total duration into three equal parts

   Each animation lasts 1 second, total duration is 3 seconds, so each part is 1/3 = 0.33 (approx).

2. Step 2: Calculate Interval for third animation

   Third animation starts after first two: start = 2 x 0.33 = 0.66, end = 1.0 (full duration).

3. Final Answer:

   Interval(0.66, 1.0) -> Option A

4. Quick Check:

   Third animation Interval = 0.66 to 1.0 [OK]

Hint: Divide total duration by number of animations for Intervals [OK]

Common Mistakes:

• Using overlapping intervals
• Starting third animation too early
• Not dividing total duration evenly