Flutter - Using AnimatedOpacity Widget Examples

This tutorial shows you how to use AnimatedOpacity widget in Flutter.

If you want to create an opacity animation on a widget when the opacity changes, it can be done easily using Flutter. A widget called AnimatedOpacity makes it easy to create such animation.

Using AnimatedOpacity Widget

To use the widget, you need to call the below constructor.

  const AnimatedOpacity({
    Key key,
    this.child,
    @required this.opacity,
    Curve curve = Curves.linear,
    @required Duration duration,
    VoidCallback onEnd,
    this.alwaysIncludeSemantics = false,
  })

There are two required arguments. The first one is opacity, a double value which indicates the opacity to be set on the child. A value of 1.0 indicates fully opaque, while a value of 0.0 indicates fully transparent. Every time the value changes, Flutter will play an animation. You will see that the opacity gradually changes from the initial value to the new value. The other required argument is duration which is used to set how long the animation should be played. Apart from the required arguments, the widget where the opacity animation will be applied needs to be passed as child argument.

The example below consists of a Container wrapped as the child of AnimatedOpacity and a button to change the opacity value.

  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      AnimatedOpacity(
        opacity: _opacity,
        duration: const Duration(seconds: 3),
        curve: Curves.bounceInOut,
        onEnd: () {
          print('Animation ends');
        },
        child: Container(
          width: 150,
          height: 50,
          color: Colors.teal,
          child: const Center(
            child: const Text(
                'Woolha.com',
                style: const TextStyle(fontSize: 24, color: Colors.white)
            ),
          ),
        ),
      ),
      RaisedButton(
        child: const Text('Change opacity'),
        onPressed: () {
          setState(() {
            _opacity = _opacity == 0.1 ? 1 : 0.1;
          });
        },
      ),
    ],
  )

Output:

Set Animation Curve

The default animation curve is linear. Just like other Flutter animations, it allows you to set the animation curve. To change the curve, you need to pass the Curve to use as curve argument.

  AnimatedOpacity(
    opacity: _opacity,
    duration: const Duration(seconds: 3),
    curve: Curves.bounceInOut,
    child: Container(
      width: 150,
      height: 50,
      color: Colors.teal,
      child: const Center(
        child: const Text(
            'Woolha.com',
            style: const TextStyle(fontSize: 24, color: Colors.white)
        ),
      ),
    ),
  )

Output:

Set onEnd Callback

You can pass a callback function as onEnd argument that will be called when the animation ends.

  AnimatedOpacity(
    opacity: _opacity,
    duration: const Duration(seconds: 3),
    onEnd: () {
      print('Animation ends');
    },
    child: Container(
      width: 150,
      height: 50,
      color: Colors.teal,
      child: const Center(
        child: const Text(
            'Woolha.com',
            style: const TextStyle(fontSize: 24, color: Colors.white)
        ),
      ),
    ),
  )

AnimatedOpacity Parameters

• Key key: The widget's key, used to control how a widget is replaced with another widget.
• Widget child: The widget below this widget in the tree, where the opacity animation will be applied.
• double opacity *: The opacity of the child.
• Curve curve: The animation curve. Defaults to Curve.lienar.
• Duration duration *: The duration of the animation.
• VoidCallback onEnd: A callback function to be called when the animation ends.
• bool alwaysIncludeSemantics: Whether the semantic information of the children is always included.

*: required

Full Code

  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _AnimatedOpacityExample(),
      );
    }
  }
  
  class _AnimatedOpacityExample extends StatefulWidget {
  
    @override
    State<StatefulWidget> createState() {
      return _AnimatedOpacityExampleState();
    }
  }
  
  class _AnimatedOpacityExampleState extends State<_AnimatedOpacityExample> {
  
    double _opacity = 0.1;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Woolha.com Flutter Tutorial'),
        ),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedOpacity(
                opacity: _opacity,
                duration: const Duration(seconds: 3),
                curve: Curves.bounceInOut,
                onEnd: () {
                  print('Animation ends');
                },
                child: Container(
                  width: 150,
                  height: 50,
                  color: Colors.teal,
                  child: const Center(
                    child: const Text(
                        'Woolha.com',
                        style: const TextStyle(fontSize: 24, color: Colors.white)
                    ),
                  ),
                ),
              ),
              RaisedButton(
                child: const Text('Change opacity'),
                onPressed: () {
                  setState(() {
                    _opacity = _opacity == 0.1 ? 1 : 0.1;
                  });
                },
              ),
            ],
          ),
        ),
      );
    }
  }

Summary

AnimatedOpacity widget makes it easy to animate the opacity change of a widget. It's also possible to set the duration and the curve of the animation.

You can also read about:

• Opacity, which is used to set the opacity of a widget
• AnimatedCrossFade, which is used to create fade transition effects between two widgets.
• AnimatedAlign, a widget for creating animation when the alignment of a widget changes.
• AnimatedPadding, a widget for creating aniamation when the padding of a widget changes.
• AnimatedSwitcher, a widget for creating animation when switching between two widgets.
• AnimatedSize, a widget that animates its size to match the size of its child.
• AnimatedContainer, a widget that starts an animation when the value of a property changes.