DEV Community

Cover image for Flutter show and hide widget with Fade animation
Mighty
Mighty

Posted on • Updated on • Originally published at mightytechno.com

Flutter show and hide widget with Fade animation

In build animation support provided by flutter is pretty powerful and most of the case no need to implement custom widget to do your job.

No exceptional, adding show and hide animation are the same. Flutter provides AnimatedOpacity Widget to change the opacity of the widget when show and hide in progress. It will linearly change the opacity and you can change the curve (how the animation should happen) by setting values like bounceIn, easeInOut etc.

The main property which you need to set is opacity. If you set the opacity to 1 it means it shows the child widget in full opaque. If you set the opacity to 0 it means it fully transparent and you will not be able to see the widget.

This is the code for adding fade animation when show and hide.

       AnimatedOpacity(
             opacity: loading ? 0 : 1 ,
             curve: Curves.easeInOut,
             duration: Duration(milliseconds: 500),
             child: Container(
               width: 200,
               height: 200,
               color: Colors.blueAccent,
             ),
          )
Enter fullscreen mode Exit fullscreen mode

In here what we do is we are changing the loading value to false when using press the floating button and inside the AnimatedOpacity it checks the value of the loading variable. If it is true we set 0 and if not we set it as 1. Now run the code and check how the animation happen.

Does widget get removed when opacity zero?

The widget will not get removed when opacity is 0. It just changes the opacity and widget will take the required space of the widget tree.

We can verify this by adding 3 Flexible widgets inside a column and add an AnimationOpacity widget as a middle one. If the widget gets removed when opacity becomes 0, top and bottom widget has to come near each other. But you can see it keep the remaining space.

Column(
      children: [
              Flexible(
                     child: Container(
                     height: 200,
                     color: Colors.red,
                     )),
               Flexible(
                     child: AnimatedOpacity(
                     opacity: loading ? 0 : 1,
                     curve: Curves.easeInOut,
                     duration: Duration(milliseconds: 500),
                     child: Container(
                          color: Colors.greenAccent,
                          height: 200,
                          ),
                         ),
                      ),
                Flexible(
                     child: Container(
                     height: 200,
                     color: Colors.blueAccent,
                     ))
               ],
        )

Enter fullscreen mode Exit fullscreen mode

Before setting opacity.
Flutter show and hide widget with Fade animation

After making opacity 0. It keeps space.
Flutter show and hide widget with Fade animation

Originally published at mightytechno

Connect with me - Instagram |Blog |Twitter

Top comments (3)

Collapse
 
incrypto32 profile image
Krishnanand

Nice once :) Keep on making some more content on animations in flutter.

Collapse
 
nthungdev profile image
Hung Nguyen

How would you do the same thing but remove the space the widget occupied after it went transparent?

Collapse
 
mightytechno profile image
Mighty

You can change the height of the widget to zero