FadeTransition Widget – Flutter Widget Guide By Flutter Agency

In this series of Animated Widgets, we have been through animated widgets like AnimatedWidgetBaseState Widget, AnimatedCrossFade Widget, AnimatedDefaultTextStyle Widget, AnimatedListState Widget so now this time we will learn about FadeTransition Widget with a detailed article on it.

What FadeTransition Widget in Flutter?

FadeTransition Widget lets you fade a widget in and out by animating its opacity. Therefore, you just have to provide the opacity parameter with animation and a child widget on which the animation has to be performed. But where does the animation come from? You first have to create an AnimationController to set the duration and then create the animation giving the start and end opacity values. Finally, you can start the animation by calling the forward() method on the controller.

Default Constructor for it will have Code Snippet as below:

FadeTransitionWidget({
  Key key,
  @required Animation<double> opacity,
  bool alwaysIncludeSemantics: false,
  Widget child,
});

In the Above constructor, all fields marked with @required must not be empty so in the above constructor, opacity must not be empty.

Let’s go through its Properties below.

Key key: This attribute key controls how one widget replaces another widget in the tree.
Animation<double> opacity: This attribute will be the animation that controls the opacity of the child. If the current value of the opacity animation is v, the child will be painted with an opacity of v. For example, if v is 0.5, the child will be blended 50% with its background. Similarly, if v is 0.0, the child will be completely transparent. You can read our separate article on Opacity Widget.
bool alwaysIncludeSemantics: This attribute will decide whether the semantic information of the children is always included. The default value will be false. When true, regardless of the opacity settings the child semantic information is exposed as if the widget were fully visible. This is useful in cases where labels may be hidden during animations that would otherwise contribute relevant semantics.
Widget child: This attribute is used to define the widget below the current widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

When performing any animation in flutter make sure that the class extends a Stateful Widget as the state changes when an animation is performed.

Fade Transition Widget

General Queries on FadeTransition Widget

How Flutter animate reverse effect on FadeTransition Widget?

When users try to show and hide barriers on top of widgets, showing this barrier can have with animation, but when I try to close and hide that, controller.reverse() doesn’t have any animation to hide.

How to use FadeTransition Widget in Flutter?

The following code snippet tells us how to implement FadeTransition Widget in Flutter.

void main() => runApp(MaterialApp(home: BarrierEffect()));

class BarrierEffect extends StatefulWidget {
  @override
  State<BarrierEffect> createState() => _BarrierEffect();
}

class _BarrierEffect extends State<BarrierEffect> with TickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (_, child) {
          return Stack(
            children: <Widget>[
              Center(
                child: ElevatedButton(
  	           child: Text('Show Barrier'),
                 onPressed: () => controller.repeat(reverse:true),
                 style: ElevatedButton.styleFrom(
    		              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0)),
  	      ),
          ),
        ),

              Visibility(
                visible: controller.value != 0,
                child: Opacity(
                  opacity: controller.value,
                  child: Container(
                    color: Colors.black.withOpacity(0.9),
                    child: Center(child: Text('My Barrier', style: TextStyle(color: Colors.white))),
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

We will get output like below:

Using a Fade Transition Widget

Conclusion:

In this article, we have been through What is FadeTransition Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us.

Do let us know if you need any assistance with Flutter?

Contact Us Today

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.