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.

FadeTransition(
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,
).animate(controller);

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

controller.forward();

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.

Previous
Next Post »

3 comments

Click here for comments
panicle
admin
26 October 2020 at 11:40 ×

I havе read so many content about the blogger lovers but this pɑragraph is truly a pleasant
article, keep it up.

Reply
avatar
deep
admin
27 October 2020 at 22:58 ×

Thank for feedback, you very valuable for us.

Reply
avatar
16 November 2020 at 23:49 ×

Życie pisze najbardziej oryginalne, najbardziej komiczne, a jednocześnie najbardziej dramatyczne scenariusze. – Wisława Szymborska

Reply
avatar