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.