Flutter – Fading a Widget

Every application needs to navigate through multiple pages and components in an application. In flutter one way to do so is to make the use of routes (ie, pages). But when there is a need to just remove a part (element) from a page, using routes becomes redundant. This is where Fading comes in. In this, the component is simply faded away from the page. In this article, we will explore the same in detail.

Constructor of AnimatedOpacity class:

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

Properties of AnimatedOpecity Widget:

• alwaysIncludeSemantics: This property controls whether the semantics information will be visible or not, by taking a boolean as the object.
• child: The child property takes in a widget as the object to show it in the widget tree below or inside the AnimatedOpacity widget.
• opacity: This property takes in a double value as the object to control the opacity that is to be achieved while animation. It ranges from 0.0 to 1.0.

Fading in Flutter is done through the use of AnimatedOpacity widget.  Follow the below steps to do so:

• Create a container component to fade.
• Define a stateful widget.
• Add a button that toggles the visibility.
• Display the fading of the container component.

Let’s discuss them in detail.

Creating a Container:

This is the component that will fade upon the toggle of the button. A simple container is defined below:

Dart

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.green,
);

Define a StatefulWidget:

Define a stateful component that will hold the container and the button and to know whether the box should be visible as below:

Dart

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
  }
}

Adding the toggle button:

This is the button that on pressed makes the container invisible. It can be defined as below:

Dart

FloatingActionButton(
  onPressed: () {
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: Icon(Icons.flip),
);

Display the fading:

Now use the AnimatedOpacity widget to fade the box. It is defined as below:

Dart

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

Complete Source Code:

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'GeeksForGeeks';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}

Output: