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:

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:

Adding the toggle button:

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

Display the fading:

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

Complete Source Code:

Output: