Implicit animations

With Flutter's animation library, you can add motion and create visual effects for the widgets in your UI. One part of the library is an assortment of widgets that manage animations for you. These widgets are collectively referred to as implicit animations, or implicitly animated widgets, deriving their name from the ImplicitlyAnimatedWidget class that they implement.

With implicit animations, you don't need to manage an AnimationController or Ticker. Instead, you pass a duration and an optional curve to an implicitly animated widget, such as AnimatedOpacity. When you update the widget with a new target value, such as after calling setState(), the widget automatically animates to that value:

import 'package:material_ui/material_ui.dart';
​
class FadeBoxDemo extends StatefulWidget {
  const FadeBoxDemo({super.key});
​
  @override
  State<FadeBoxDemo> createState() => _FadeBoxDemoState();
}
​
class _FadeBoxDemoState extends State<FadeBoxDemo> {
  bool _visible = true;
​
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedOpacity(
          opacity: _visible ? 1 : 0,
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOut,
          child: const FlutterLogo(size: 100),
        ),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () => setState(() => _visible = !_visible),
          child: const Text('Toggle opacity'),
        ),
      ],
    );
  }
}

App source: implicit animation example

When no built-in implicitly animated widget covers the property you want to animate, you can build a custom implicit animation with TweenAnimationBuilder.

The following set of resources provides many ways to learn about implicit animations in Flutter.

Animations in Flutter codelab

Learn about implicit and explicit animations and get hands-on experience adding implicit animations to a complete Flutter app.

AnimatedContainer sample

A step-by-step recipe for using the AnimatedContainer implicitly animated widget.

Fade a widget in and out

A cookbook recipe showing how to fade a widget using AnimatedOpacity.

TweenAnimationBuilder API page

Create custom implicit animations for any property using a Tween and a builder callback.

ImplicitlyAnimatedWidget API page

All implicit animations extend the ImplicitlyAnimatedWidget class.

Flutter in Focus videos feature 5-10 minute tutorials with real code that cover techniques that every Flutter dev needs to know from top to bottom. The following videos cover topics that are relevant to implicit animations.

Watch on YouTube in a new tab: "Flutter implicit animation basics"

Watch on YouTube in a new tab: "Create custom implicit animations with TweenAnimationBuilder"

Watch the Boring Show to follow Google engineers building apps from scratch in Flutter. The following episode covers using implicit animations in a news aggregator app.

Watch on YouTube in a new tab: "Adding implicit animations to a news application"

A weekly series of short animated videos each showing the important features of one particular widget. In about 60 seconds, you'll see real code for each widget with a demo about how it works. The following Widget of the Week videos cover implicitly animated widgets: