As UI developers, you often need to show and hide elements on screen. However,quickly popping elements on and off the screen can feel jarring to end users.Instead, you can fade elements in and out with an opacity animation to createa smooth experience.

In Flutter, you can achieve this task using the AnimatedOpacity Widget.

Directions

• Show a box to fade in and out
• Define a StatefulWidget
• Display a button that toggles the visibility
• Fade the box in and out

1. Create a box to fade in and out

First, you’ll need something to fade in and out. In this example,you’ll draw a green box on screen.

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

2. Define a StatefulWidget

Now that you have a green box to animate, you’ll need a way to know whether thebox should be visible or invisible. To accomplish this, use aStatefulWidget.

A StatefulWidget is a class that creates a State object. The State objectholds some data about our app and provides a way to update that data. When youupdate the data, you can also ask Flutter to rebuild our UI with those changes.

In this case, you’ll have one piece of data: a boolean representing whether thebutton is visible or invisible.

To construct a StatefulWidget, you need to create two classes: AStatefulWidget and a corresponding State class. Pro tip: The Flutter pluginsfor Android Studio and VSCode include the stful snippet to quickly generatethis code.

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    // The green box goes here with some other Widgets.
  }
}

3. Display a button that toggles the visibility

Now that you have some data to determine whether the green box should be visibleor invisible, you’ll need a way update that data. In this case, if the box isvisible, you want to hide it. If the box is hidden, you want to show it.

To achieve this, you’ll display a button. When a user presses the button, you’llflip the boolean from true to false, or false to true. You need to make thischange using setState, which is a method on the State class.This lets Flutter know it needs to rebuild the Widget.

Note: For more information on working with user input, please see theGestures section of the Cookbook.

FloatingActionButton(
  onPressed: () {
    // Make sure to call setState. This tells Flutter to rebuild the
    // UI with the changes.
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: Icon(Icons.flip),
);

4. Fade the box in and out

You’ve got a green box on screen. You’ve got a button to toggle the visibilityto true or false. So how do you fade the box in and out? With anAnimatedOpacity Widget.

The AnimatedOpacity Widget requires three arguments:

• opacity: A value from 0.0 (invisible) to 1.0 (fully visible).
• duration: How long the animation should take to complete.
• child: The Widget to animate. In our case, the green box.

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

Complete example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Opacity Demo';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}
// The StatefulWidget's job is to take in some data and create a State class.
// In this case, the Widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
          // If the Widget should be visible, animate to 1.0 (fully visible).
          // If the Widget should be hidden, animate to 0.0 (invisible).
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          // The green box needs to be the child of the AnimatedOpacity
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Make sure to call setState. This tells Flutter to rebuild the
          // UI with the changes.
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}