AnimatedOpacity Widget

What is AnimatedOpacity Widget?

Animated version of Opacity which automatically transitions the child's opacity over a given duration whenever the given opacity changes.

Default Constructor

The default constructor creates a widget that animates its opacity implicitly.

AnimatedOpacity(
    opacity:
    duration:
    child:
);

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

Configure opacity parameter to define the opacity. An opacity of 1.0 is fully opaque. An opacity of 0.0 is fully transparent (i.e., invisible).

Configure duration parameter to a duration represents a difference from one point in time to another.

The child parameter is to add the widget below AnimatedOpacity widget in the tree.

Code snippet

The following code shows how to configure AnimatedOpacity widget.

AnimatedOpacity(
    opacity: opacityLevel,
    duration: Duration(seconds: 3),
    child: FlutterLogo(
        size: 100,
    ),
);

Demo Code

This example transitions the FlutterLogo widget opacity over a given duration.

import 'package:flutter/material.dart';

class AnimatedOpacityDemo extends StatefulWidget {
  @override
  _AnimatedOpacityDemoState createState() => _AnimatedOpacityDemoState();
}

class _AnimatedOpacityDemoState extends State<AnimatedOpacityDemo> {
  double opacityLevel = 1.0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedOpacity(
          opacity: opacityLevel,
          duration: Duration(seconds: 3),
          child: FlutterLogo(
            size: 100,
          ),
        ),
        RaisedButton(
          child: Text('Fade'),
          onPressed: _changeOpacity,
        ),
      ],
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'AnimatedOpacity Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
          appBar: AppBar(title: const Text(_title)),
          body: Center(
            child: AnimatedOpacityDemo(),
          )),
    );
  }
}

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