AnimationController 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

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

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

A1

B3

C4

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using milliseconds instead of seconds without Duration.

Forgetting to pass vsync.

The duration parameter sets how long the animation lasts. Here, 2 seconds is correct.

2fill in blank

medium

Complete the code to start the animation forward.

Flutter

controller.[1]();

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

Aforward

Bstop

Creverse

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Using reverse() which moves animation backward.

Using stop() which halts the animation.

The forward() method starts the animation moving forward.

3fill in blank

hard

Fix the error in disposing the AnimationController properly.

Flutter

@override
void dispose() {
  controller.[1]();
  super.dispose();
}

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

Astop

Bdispose

Creset

Dforward

Attempts:

3 left

💡 Hint

Common Mistakes

Calling stop() instead of dispose().

Forgetting to call super.dispose().

Always call dispose() on AnimationController to free resources.

4fill in blank

hard

Fill both blanks to create a Tween animation from 0.0 to 1.0 and animate it with the controller.

Flutter

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

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

A0.0

B1.0

C2.0

D-1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping begin and end values.

Using integers instead of doubles.

The Tween defines the range from 0.0 to 1.0 for the animation values.

5fill in blank

hard

Fill all three blanks to add a listener to the controller that calls setState, and then start the animation forward.

Flutter

controller.addListener(() {
  [1](() {
    [2];
  });
});
controller.[3]();

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

AsetState

Bprint('Animating')

Cforward

Ddispose

Attempts:

3 left

💡 Hint

Common Mistakes

Calling dispose() instead of forward().

Not wrapping UI updates inside setState.

Use setState to update UI inside listener, optionally print a message, then start animation with forward().