Why animations enhance user experience in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple fade animation using Flutter's AnimatedOpacity widget.

Flutter

AnimatedOpacity(
  opacity: [1],
  duration: Duration(seconds: 1),
  child: Text('Hello Animation'),
)

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

A1.0

B-1.0

C2.0

D0.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using values greater than 1.0 or less than 0.0 causes errors.

Confusing opacity with duration.

The opacity value must be between 0.0 (fully transparent) and 1.0 (fully visible). Using 1.0 makes the text fully visible.

2fill in blank

medium

Complete the code to animate a container's width from 100 to 200 pixels using AnimatedContainer.

Flutter

AnimatedContainer(
  width: [1],
  height: 100,
  duration: Duration(seconds: 2),
  color: Colors.blue,
)

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

A200

B50

C300

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using a smaller width than the starting width.

Using values that don't change the size.

The width should be 200 to animate from 100 to 200 pixels.

3fill in blank

hard

Fix the error in the code to properly animate a widget's position using AnimatedPositioned inside a Stack.

Flutter

Stack(
  children: [
    AnimatedPositioned(
      left: [1],
      duration: Duration(seconds: 1),
      child: Icon(Icons.star),
    ),
  ],
)

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

Anull

B50.0

C'50'

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around numbers causing type errors.

Passing null or boolean instead of a number.

The 'left' property requires a double value like 50.0, not a string or null.

4fill in blank

hard

Fill both blanks to create a Tween animation that changes color from red to blue.

Flutter

ColorTween(
  begin: Colors.[1],
  end: Colors.[2],
).animate(controller)

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

Ared

Bgreen

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping begin and end colors.

Using colors that don't contrast well.

The animation should start from red and end at blue to create a smooth color change.

5fill in blank

hard

Fill all three blanks to create a simple animation controller with duration 3 seconds and start it.

Flutter

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

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

Astart

B3

Crepeat

Dstop

Attempts:

3 left

💡 Hint

Common Mistakes

Using stop() instead of start() to begin animation.

Setting wrong duration values.

The duration is 3 seconds, then the animation is started with start() and set to repeat with repeat().