In this example the Flutter animation controller is used to count between zero
and three. The IntTween class is bound to the animated controller so the count
up or down based on the the animation direction. Then the animation count is
used to display the periods in the loading display.
Configure the Animation Counter
The animation controller is easy to configure.
1. Add the mixin SingleTickerProviderStateMixin
class _LoadingState extends State<Loading%gt;
with SingleTickerProviderStateMixin { //... }
2. Initialize the animation controller and counter
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_animation = IntTween(begin: 0, end: totalPeriodCount).animate(_controller)
..addStatusListener((state) {
if (state == AnimationStatus.completed) {
// NOTE: Change the animation counter direction
_controller.reverse();
} else if (state == AnimationStatus.dismissed) {
// NOTE: Change the animation counter direction
_controller.forward();
}
})
..addListener(() {
// NOTE: Update the view
setState(() {});
});
_controller.forward();
}
Controlling the Animation Notes:
- Use _controller.reverse() to reverse the animation counter.
- Use _controller.forward() to advance the animation counter.
-
And be sure to update the views state using setState((){}) so the view is
updated.
3. Use the animation counter. Use _animation.value to reference the value for
displays frame.
int visiblePeriodCount = totalPeriodCount - _animation.value;
4. Tear down the animation controller
@override
void dispose() {
_controller.dispose();
super.dispose();
}
Try it out
Putting it all together, try out this animation example in the DartPad:
Overall
This example shows how easy it is to use the animations in Flutter. The
simplicity the Flutter animation controller makes it easy to build beautiful
application animations that bring a lot of joy to application usage.
I hope you enjoyed this small tutorial. I'd love to hear what you used the
animation controller. Please share your tips and tricks below.
