Implicit animations (AnimatedContainer, AnimatedOpacity) in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an AnimatedContainer with a duration of 500 milliseconds.

Flutter

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

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

A500

B300

C1000

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Using seconds instead of milliseconds.

Forgetting to wrap the number inside Duration(milliseconds: ...).

The duration parameter expects a Duration object specifying how long the animation lasts. 500 milliseconds is a common smooth animation time.

2fill in blank

medium

Complete the code to animate the opacity of a widget to 0.5 using AnimatedOpacity.

Flutter

AnimatedOpacity(
  opacity: [1],
  duration: Duration(seconds: 1),
  child: Container(color: Colors.red, width: 100, height: 100),
)

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

A0

B0.5

C1.0

D2.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using values greater than 1 or less than 0.

Confusing opacity with color alpha.

The opacity value must be between 0.0 (fully transparent) and 1.0 (fully visible). 0.5 means half transparent.

3fill in blank

hard

Fix the error in the AnimatedContainer code by completing the missing property to change its color.

Flutter

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: 150,
  height: 150,
  [1]: Colors.green,
)

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

AfillColor

BbackgroundColor

Ccolor

DdecorationColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'backgroundColor' which is not a valid property here.

Trying to use 'decorationColor' which does not exist.

AnimatedContainer uses the 'color' property to set its background color directly.

4fill in blank

hard

Fill both blanks to create an AnimatedOpacity widget that animates to fully visible over 2 seconds.

Flutter

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

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

A1.0

B0.0

C2

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity 0.0 which makes the widget invisible.

Setting duration to 1 second instead of 2.

Opacity 1.0 means fully visible, and duration 2 seconds means the animation lasts 2 seconds.

5fill in blank

hard

Fill all three blanks to create an AnimatedContainer that animates width, height, and color with a 700ms duration.

Flutter

AnimatedContainer(
  width: [1],
  height: [2],
  color: [3],
  duration: Duration(milliseconds: 700),
)

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

A200

B150

CColors.orange

DColors.purple

Attempts:

3 left

💡 Hint

Common Mistakes

Using color values as strings instead of Colors constants.

Mixing up width and height values.

Width 200 and height 150 are valid sizes, and Colors.orange is a valid color for the container.