Implicit animations (AnimatedContainer, AnimatedOpacity) in Flutter

Introduction

Implicit animations help you change UI smoothly without writing complex code. They make your app look lively and easy to use.

When you want a button to smoothly change color when pressed.

When you want a box to grow or shrink with animation on user action.

When you want to fade a widget in or out gently.

When you want to animate simple property changes like size, color, or opacity without manual animation controllers.

Syntax

Flutter

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  color: Colors.blue,
  width: 100,
  height: 100,
  child: Text('Hello'),
)

AnimatedOpacity(
  duration: Duration(milliseconds: 500),
  opacity: 0.5,
  child: Icon(Icons.star),
)

AnimatedContainer animates changes in size, color, padding, margin, and more.

AnimatedOpacity animates the transparency of a widget.

Examples

This creates a red box that animates size and color changes over 1 second.

Flutter

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: 200,
  height: 200,
  color: Colors.red,
  child: SizedBox(),
)

This fades out the text smoothly over 0.8 seconds.

Flutter

AnimatedOpacity(
  duration: Duration(milliseconds: 800),
  opacity: 0.0,
  child: Text('Fading out'),
)

Sample App

This app shows a colored box that changes size and color when you tap the button. The text below fades in and out with the box. This uses AnimatedContainer and AnimatedOpacity to animate changes smoothly without manual animation code.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Implicit Animations Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedContainer(
                width: _selected ? 200 : 100,
                height: _selected ? 200 : 100,
                color: _selected ? Colors.blue : Colors.red,
                alignment: Alignment.center,
                duration: const Duration(seconds: 1),
                curve: Curves.easeInOut,
                child: const Text('Tap me', style: TextStyle(color: Colors.white, fontSize: 18)),
              ),
              const SizedBox(height: 20),
              AnimatedOpacity(
                opacity: _selected ? 1.0 : 0.0,
                duration: const Duration(seconds: 1),
                child: const Text('Hello! I appear and disappear'),
              ),
              const SizedBox(height: 40),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _selected = !_selected;
                  });
                },
                child: const Text('Toggle Animation'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Implicit animations automatically animate when their properties change.

Use duration to control how long the animation lasts.

Use curve to control the animation speed style (like ease-in, ease-out).

Summary

Implicit animations make UI changes smooth and easy.

AnimatedContainer animates size, color, and more.

AnimatedOpacity animates transparency.