Staggered animations in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an AnimationController with a duration of 2 seconds.

Flutter

final controller = AnimationController(vsync: this, duration: Duration(seconds: [1]));

Drag options to blanks, or click blank then click option'

A4

B1

C3

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong number for seconds.

Forgetting to wrap the number in Duration().

The duration of the AnimationController is set to 2 seconds using Duration(seconds: 2).

2fill in blank

medium

Complete the code to create a Tween that animates from 0.0 to 100.0.

Flutter

final animation = Tween<double>(begin: [1], end: 100.0).animate(controller);

Drag options to blanks, or click blank then click option'

A1.0

B0.0

C50.0

D100.0

Attempts:

3 left

💡 Hint

Common Mistakes

Setting begin to the same value as end.

Using an integer instead of a double.

The Tween starts at 0.0 and ends at 100.0 to animate the value from 0 to 100.

3fill in blank

hard

Fix the error in the Interval to start the animation at 30% and end at 70%.

Flutter

final curvedAnimation = CurvedAnimation(parent: controller, curve: Interval([1], 0.7));

Drag options to blanks, or click blank then click option'

A0.3

B0.0

C0.5

D1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0.0 as start which starts animation immediately.

Using values outside 0.0 to 1.0 range.

The Interval curve should start at 0.3 (30%) and end at 0.7 (70%) to stagger the animation correctly.

4fill in blank

hard

Fill both blanks to create a TweenSequence with two steps: first from 0 to 50, then from 50 to 100.

Flutter

final sequence = TweenSequence<double>([
  TweenSequenceItem(tween: Tween(begin: 0, end: [1]), weight: 50),
  TweenSequenceItem(tween: Tween(begin: [2], end: 100), weight: 50),
]);

Drag options to blanks, or click blank then click option'

A50

B0

C100

D25

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for the end and begin causing jumps.

Using values outside the 0-100 range.

Both blanks use 50 to split the animation into two equal parts: 0 to 50, then 50 to 100.

5fill in blank

hard

Fill all three blanks to create a staggered animation with three intervals: 0-0.3, 0.3-0.6, and 0.6-1.0.

Flutter

final animation1 = CurvedAnimation(parent: controller, curve: Interval(0.0, [1]));
final animation2 = CurvedAnimation(parent: controller, curve: Interval([2], [3]));

Drag options to blanks, or click blank then click option'

A0.3

B0.6

C1.0

D0.9

Attempts:

3 left

💡 Hint

Common Mistakes

Overlapping intervals causing animations to run at the same time.

Intervals not covering the full 0 to 1 range.

The first animation runs from 0.0 to 0.3, the second from 0.3 to 0.6, and the third from 0.6 to 1.0 to create a smooth stagger.