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

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

Before setting opacity.

After making opacity 0. It keeps space.

Originally published at mightytechno

Connect with me - Instagram |Blog |Twitter