Flutter – Fading a Widget

Every application needs to navigate through multiple pages and components in an application. In flutter on way to do so is 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.

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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) {
  }
}

chevron_right


Adding the toggle button:

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

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Display the fading:

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

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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,
  ),
);

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
      ), 
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.