Skip to content
Related Articles

Related Articles

Improve Article

Flutter – Fading a Widget

  • Last Updated : 24 Nov, 2020
Geek Week

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

 

 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :