Use Animation in Flutter Application | Fade Transition Widget

Fade Transition Widget

Fade Transition in flutter

Flutter has a powerful animations engine for adding motion and effects to your Flutter app. But sometimes, you just need to do something simple - like fading in a widget.

Flutter has a bunch of transitions ready to drop into your Flutter app.
Let's take a look at Fade Transition.

How to use FadeTransition Widget ?

Fade Transition lets you fade a widget in and out. It takes a child and an animation.

opacity: animation,
child: Text(widget.text)

But where does the animation come from ?

Well, first, we create an AnimationController to set the duration, and then we create an animation- giving the start and end opacity values and animation via the controller.

Final animation = Tween(
begin: 0.0,
end: 1.0,

Finally, we start the animation by calling forward on the controller.


It's a good idea to wrap a FadeTransition in the StatefulWidget, so you can manage its state and clean up once it is done.

Source Code for FadeTransition Widget

Now, its time to take an example for better understanding.

Result of the above program :

Bravo! Here is what we want. Now it is easy to make our application more effective.

Next Post »