Tween animations in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Flutter

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

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

A1.0

B0

C100

D"1"

Attempts:

3 left

💡 Hint

Common Mistakes

Using an integer 0 instead of 1.0 as the end value.

Using a string "1" instead of a double.

The Tween's end value should be 1.0 to animate from 0.0 to 1.0 smoothly.

2fill in blank

medium

Complete the code to create a ColorTween from red to blue.

Flutter

final colorAnimation = ColorTween(begin: Colors.red, end: [1]).animate(controller);

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

AColors.green

BColors.yellow

CColors.blue

DColors.black

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a color other than blue for the end value.

Using a color not defined in Colors.

The ColorTween should animate from red to blue, so the end color is Colors.blue.

3fill in blank

hard

Fix the error in the Tween declaration to animate an integer from 0 to 10.

Flutter

final intAnimation = Tween<int>(begin: 0, end: [1]).animate(controller);

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

Anull

B10

C"10"

D10.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 10.0 (double) instead of 10 (int).

Using a string "10" instead of an integer.

The Tween requires integer values, so end must be 10, not 10.0 or a string.

4fill in blank

hard

Fill both blanks to create a Tween that animates a double from 50 to 100.

Flutter

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

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

A50

B100

C0

D1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping begin and end values.

Using 0 or 1.0 which do not match the intended size range.

The Tween should start at 50 and end at 100 to animate size from 50 to 100.

5fill in blank

hard

Fill all three blanks to create a Tween animation that animates opacity from 0.0 to 1.0 with a controller.

Flutter

final opacityAnimation = Tween<double>(begin: [1], end: [2]).animate([3]);

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

A0.0

B1.0

Ccontroller

Danimation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1.0 as begin or 0.0 as end, reversing the animation.

Using 'animation' instead of 'controller' for animate.

The opacity animation starts at 0.0, ends at 1.0, and uses the animation controller.