Flutter Implicit Animations

• Using an implicit animation widget
• Implicit animation examples
  • AnimatedOpacity example
  • AnimatedCrossFade example
• Implicit animations widgets

If you’re new to Flutter or new to animation, consider starting with the built-in Flutter implicit widgets. Implicit animations are useful when you want to quickly add an animation without having to write a lot of animation code because the Flutter implicit widgets already include the AnimationController, the ticker provider, the listener, and other animations elements.

Implicit animations start immediately when a property value changes—they take the property value change as an implicit command to start the animation.

Using an implicit animation widget

1. Create your StatefulWidget. 2. Create the State class to hold the animation object and the implicit animation widget. 3. Specify the BuildContext to return the implicit animation widget, such as AnimatedOpacity. 4. Add the animation object, the duration of the animation, and any parameters relating to the implicit animation. For example, you would set the opacity level for an implicit AnimatedOpacity widget.

To create your own reusable implicit animations, create a widget that extends ImplicitlyAnimatedWidget.

For customized animations, extend AnimatedWidget to create Transition animations such as the DecoratedBoxTransition or build your own Explicit animations using the AnimationController.

Implicit animation examples

The AnimatedOpacity and AnimatedCrossFade are two implicit widgets included in the widget library.

AnimatedOpacity example

The AnimatedOpacity implicit widget automatically transitions a child's opacity over a given duration whenever the specified opacity changes.

The code for the AnimatedOpacity example is shown below. The AnimatedOpacity widget extends the ImplicitlyAnimatedWidget class and already includes the listeners, tickers, and other elements that define the animation—so when you reuse the AnimatedOpacity widget, you don’t need to specify those elements.

```Dart
import 'package:flutter/material.dart';

class LogoFade extends StatefulWidget {
  @override
  createState() => new LogoFadeState();
}

class LogoFadeState extends State<LogoFade> {
  double opacityLevel = 1.0;

  _changeOpacity() {
    setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        new AnimatedOpacity(
          opacity: opacityLevel,
          duration: new Duration(seconds: 3),
          child: new Container (
              width: 100.0,
              height: 100.0,
              color: Colors.blueAccent
          ),
        ),
        new SizedBox(height: 48.0),
        new RaisedButton(
          child: new Text('AnimatedOpacity'),
          textColor: Colors.white,
          color: Colors.black45,
          splashColor: Colors.blueAccent,
          onPressed: _changeOpacity,
        ),
      ],
    ),
    );

  }
}

void main() {
  runApp(new MaterialApp(home: new LogoFade()));
}
```

AnimatedCrossFade example

The AnimatedCrossFade implicit widget automatically cross-fades between two children and animates itself between their sizes. Mouseover the image to view the animation.

The code for the AnimatedCrossFade example is shown below. The AnimatedCrossFade class extends ImplicitlyAnimatedWidget which already includes the listeners, tickers, and other elements that define the animation—they are implied or already stated, so you don’t need to add them here.

```Dart

import 'package:flutter/material.dart';

class ImageCrossFade extends StatefulWidget {
  @override
  createState() => new _ImageCrossFadeState();
}

class _ImageCrossFadeState extends State<ImageCrossFade> {
  CrossFadeState _crossFadeState = CrossFadeState.showFirst;


  _changeImage() {
    setState(() {
      if (_crossFadeState == CrossFadeState.showFirst)
        _crossFadeState = CrossFadeState.showSecond;
      else
        _crossFadeState = CrossFadeState.showFirst;
    });
  }


  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new AnimatedCrossFade(
            duration: const Duration(seconds: 3),
            firstChild: new SizedBox(
              child: new Container (
                  width: 150.0,
                  height: 150.0,
                  color: Colors.amberAccent
              ),
            ),
            secondChild: new SizedBox(
              height: 100.0,
              child: new Container (
                  width: 100.0,
                  height: 100.0,
                  color: Colors.blueAccent
              ),
            ),
            crossFadeState: _crossFadeState,
          ),
          new SizedBox(height: 48.0),
          new RaisedButton(
            child: new Text('AnimatedCrossFade'),
            textColor: Colors.white,
            color: Colors.black45,
            splashColor: Colors.blueAccent,

            onPressed: _changeImage,
          ),
        ],
      )
    );
  }
}

void main() {
  runApp(new MaterialApp(home: new ImageCrossFade()));
}
```

Implicit animations widgets

The Flutter widgets and material libraries include the following implicit animation widgets.