Implicit animations (AnimatedContainer, AnimatedOpacity) in Flutter - Mini App: Build & Ship

Build: Animated Box Screen

This screen shows a colored box that changes size, color, and opacity with smooth animations when you tap a button.

Target UI

-------------------------
| Animated Box Screen    |
|-----------------------|
|                       |
|       [  BOX  ]        |
|                       |
|                       |
|  [Change Animation]    |
-------------------------

Display a square box in the center with initial size 100x100, blue color, and full opacity.

Add a button labeled 'Change Animation' below the box.

When the button is tapped, the box should animate smoothly over 1 second to a new random size between 50 and 200 pixels, a random color, and random opacity between 0.3 and 1.0.

Use AnimatedContainer for size and color changes.

Use AnimatedOpacity for opacity changes.

The animations should run together smoothly.

Starter Code

Flutter

import 'package:flutter/material.dart';
import 'dart:math';

class AnimatedBoxScreen extends StatefulWidget {
  @override
  State<AnimatedBoxScreen> createState() => _AnimatedBoxScreenState();
}

class _AnimatedBoxScreenState extends State<AnimatedBoxScreen> {
  double boxSize = 100;
  Color boxColor = Colors.blue;
  double boxOpacity = 1.0;

  void changeAnimation() {
    // TODO: Implement random size, color, and opacity changes with animation
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Box Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // TODO: Add AnimatedOpacity and AnimatedContainer here
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: changeAnimation,
              child: Text('Change Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';
import 'dart:math';

class AnimatedBoxScreen extends StatefulWidget {
  @override
  State<AnimatedBoxScreen> createState() => _AnimatedBoxScreenState();
}

class _AnimatedBoxScreenState extends State<AnimatedBoxScreen> {
  double boxSize = 100;
  Color boxColor = Colors.blue;
  double boxOpacity = 1.0;
  final Random random = Random();

  void changeAnimation() {
    setState(() {
      boxSize = 50 + random.nextInt(151).toDouble(); // 50 to 200
      boxColor = Color.fromARGB(
        255,
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
      );
      boxOpacity = 0.3 + random.nextDouble() * 0.7; // 0.3 to 1.0
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Box Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              duration: Duration(seconds: 1),
              opacity: boxOpacity,
              child: AnimatedContainer(
                width: boxSize,
                height: boxSize,
                color: boxColor,
                duration: Duration(seconds: 1),
                curve: Curves.easeInOut,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: changeAnimation,
              child: Text('Change Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

We use AnimatedContainer to smoothly animate the box's size and color changes over 1 second. The AnimatedOpacity widget wraps the container to animate the opacity changes simultaneously. When the button is pressed, changeAnimation() generates new random values for size, color, and opacity, then calls setState() to update the UI. The animations run together smoothly because both widgets have the same duration.

This approach shows how Flutter's implicit animations let you animate properties easily without managing animation controllers.

Final Result

Completed Screen

-------------------------
| Animated Box Screen    |
|-----------------------|
|                       |
|       [  COLOR BOX ]   |
|                       |
|                       |
|  [Change Animation]    |
-------------------------

When the user taps 'Change Animation', the box smoothly changes size, color, and opacity over 1 second.

The box's size changes between small and large squares.

The box's color changes to a new random color.

The box's opacity changes between semi-transparent and fully visible.

Stretch Goal

Add a slider to control the animation duration from 0.5 to 3 seconds.

💡 Hint

Use a Slider widget to update a duration variable in setState, then use that variable for the duration property of AnimatedContainer and AnimatedOpacity.

Practice

1. What does AnimatedOpacity do in Flutter?

easy

A. It smoothly changes the transparency of a widget over time.

B. It animates the size of a widget instantly without transition.

C. It changes the color of a widget without animation.

D. It moves a widget from one position to another without animation.

Solution

1. Step 1: Understand the purpose of AnimatedOpacity

   AnimatedOpacity is designed to animate changes in a widget's opacity, making it fade in or out smoothly.

2. Step 2: Compare with other options

   Options A, B, and C describe animations or changes that AnimatedOpacity does not perform.

3. Final Answer:

   It smoothly changes the transparency of a widget over time. -> Option A

4. Quick Check:

   AnimatedOpacity = smooth transparency change [OK]

Hint: Opacity means transparency; AnimatedOpacity animates it smoothly [OK]

Common Mistakes:

• Confusing opacity with size or color animation
• Thinking it moves widgets instead of fading them
• Assuming it changes instantly without animation

2. Which of the following is the correct way to create an AnimatedContainer with a duration of 500 milliseconds?

easy

A. AnimatedContainer(duration: Duration(seconds: 0.5), color: Colors.red)

B. AnimatedContainer(duration: Duration(milliseconds: 500), color: Colors.red)

C. AnimatedContainer(duration: 500, color: Colors.red)

D. AnimatedContainer(duration: Duration(microseconds: 500), color: Colors.red)

Solution

1. Step 1: Check the Duration syntax in Flutter

   Duration expects named parameters like milliseconds or seconds, not raw numbers.

2. Step 2: Identify the correct Duration usage

   Duration(milliseconds: 500) correctly sets 500 milliseconds. AnimatedContainer(duration: Duration(seconds: 0.5), color: Colors.red) uses seconds with a decimal, which is invalid. AnimatedContainer(duration: 500, color: Colors.red) passes an int directly, which is wrong. AnimatedContainer(duration: Duration(microseconds: 500), color: Colors.red) uses microseconds, which is too small.

3. Final Answer:

   AnimatedContainer(duration: Duration(milliseconds: 500), color: Colors.red) -> Option B

4. Quick Check:

   Duration(milliseconds: 500) is correct [OK]

Hint: Use Duration(milliseconds: value) for millisecond timing [OK]

Common Mistakes:

• Passing raw int instead of Duration object
• Using seconds with decimal (not allowed)
• Confusing microseconds with milliseconds

3. What will happen when the following Flutter code runs and the button is pressed?

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(seconds: 1),
          child: Container(width: 100, height: 100, color: Colors.blue),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
          child: Text('Toggle'),
        ),
      ],
    );
  }
}

medium

A. The blue box will fade in and out smoothly when the button is pressed.

B. The blue box will instantly appear and disappear without animation.

C. The button press will cause a runtime error due to missing opacity value.

D. The blue box will change size instead of opacity.

Solution

1. Step 1: Understand AnimatedOpacity behavior

   AnimatedOpacity animates changes in opacity smoothly over the given duration.

2. Step 2: Analyze the button press effect

   Pressing the button toggles _visible between true and false, changing opacity from 1.0 to 0.0 or vice versa, triggering the fade animation.

3. Final Answer:

   The blue box will fade in and out smoothly when the button is pressed. -> Option A

4. Quick Check:

   AnimatedOpacity toggles opacity smoothly [OK]

Hint: Toggle opacity between 1 and 0 for fade effect [OK]

Common Mistakes:

• Thinking opacity changes instantly without animation
• Confusing opacity with size or color changes
• Assuming missing opacity causes error

4. Identify the error in this Flutter code snippet using AnimatedContainer and how to fix it:

AnimatedContainer(
  width: 100,
  height: 100,
  color: Colors.green,
  duration: 500,
)

medium

A. AnimatedContainer requires a child widget; add a child property.

B. The color property should be inside a BoxDecoration, not directly set.

C. Width and height must be inside constraints, not directly set.

D. The duration should be a Duration object, not an int; fix with Duration(milliseconds: 500).

Solution

1. Step 1: Check the duration property type

   AnimatedContainer's duration expects a Duration object, not a raw integer.

2. Step 2: Correct the duration syntax

   Replace duration: 500 with duration: Duration(milliseconds: 500) to fix the error.

3. Final Answer:

   The duration should be a Duration object, not an int; fix with Duration(milliseconds: 500). -> Option D

4. Quick Check:

   Duration must be Duration object [OK]

Hint: Always wrap time in Duration() for animation durations [OK]

Common Mistakes:

• Passing int directly to duration
• Misplacing color property (valid here though)
• Thinking child is mandatory for AnimatedContainer

5. You want to create a widget that smoothly changes its size and fades out at the same time when a button is pressed. Which Flutter widget combination correctly achieves this behavior?

hard

A. Use only AnimatedContainer with opacity property set to animate transparency.

B. Use AnimatedOpacity with width and height properties to animate size and opacity together.

C. Wrap an AnimatedContainer inside an AnimatedOpacity, both controlled by the same state variable.

D. Use a Container with manual setState calls to animate size and opacity.

Solution

1. Step 1: Understand capabilities of AnimatedContainer and AnimatedOpacity

   AnimatedContainer animates size, color, and other box properties but not opacity. AnimatedOpacity animates transparency only.

2. Step 2: Combine widgets for simultaneous animations

   Wrapping AnimatedContainer inside AnimatedOpacity allows simultaneous size and opacity animations controlled by the same state.

3. Step 3: Evaluate other options

   Use only AnimatedContainer with opacity property set to animate transparency. is incorrect because AnimatedContainer does not animate opacity. Use AnimatedOpacity with width and height properties to animate size and opacity together. is invalid because AnimatedOpacity does not animate size. Use a Container with manual setState calls to animate size and opacity. lacks implicit animation and requires manual animation code.

4. Final Answer:

   Wrap an AnimatedContainer inside an AnimatedOpacity, both controlled by the same state variable. -> Option C

5. Quick Check:

   Combine AnimatedContainer + AnimatedOpacity for size + fade [OK]

Hint: Use AnimatedOpacity outside AnimatedContainer for fade + size [OK]

Common Mistakes:

• Expecting AnimatedContainer to animate opacity
• Trying to animate size with AnimatedOpacity
• Using Container without animation widgets