Flutter Widget Guide — FadeTransition Widget in 5 mins or less.
This is Part 7 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
We talked about animations in Part 4 of this series. There we talked about AnimatedContainer widget and how one can use it to perform different implicit animations. In this article, we will explore how you can perform explicit animations in Flutter.
What if you want to have a simple fade in and fade out animation in your app? Well, flutter does have a widget for that.
FadeTransition Widget
1 | What?
This widget lets you animate the opacity of a widget. You have to provide its opacity parameter with animation and a child widget on which you want to perform the animation on. You may ask that can’t you can use AnimatedOpacity widget to perform animations with the opacity of a widget? The answer is Yes, of course, you can. The only thing you’ll lack there is that you won’t be able to control the animation behavior on the basis of the Animation state. That can only be done when you are working with explicit animations and AnimatedOpacity is an implicit one.
2 | Wondering how it works?
Have a look at the Code snippet below.
Below is the visual representation of the code above.
3 | Explanation
To define an explicit animation, we first have to provide our StateFulWidget with a SingleTickerProviderStateMixin. This is what provides a Ticker for the animation controller. If you have multiple animation controllers, use TickerProviderStateMixin instead. Next, define an animation controller, provide it with a ticker and a duration. Then, we create a Tween animation which helps us to define the beginning and the ending value. Here in case of opacity, we have a Tween ranging from 0.0 to 1.0. You can define a listener for your animation as well. This comes in handy when you want to control the animation behavior depending on its State.
To begin an animation, call forward on your controller. It’ll look for two things, the duration and the ticker, which are a must for an animation to run.
Next, don’t forget to clean up resources after you are done with the animation. Call dispose on your controller to do just that.
Previous 👆
Up next 👇
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.
See more in the series:
Have a wonderful day 🙂
