In this blog, we will learn how to implement Tween Animation In Flutter without the Flutter package. We will show a small demonstration to show how to integrate it into the Flutter application.
Tween Animation has a start point & endpoint and we can define the animation for the respective time and speed.
For implementing the Tween Animation In Flutter, we will follow the mentioned steps
You can check out our Flutter app development page.
1. First, Create MyApp with SingleTickerProviderStateMixin
This Mixin provides a SINGLE animation controller in a state. For using animation controller mixin, you can check the Flutter Site
|
1 2 3 |
class _MyApp extends State<MyApp> with SingleTickerProviderStateMixin { } |
2. Now, Create and Initialize the Animation controller
Now, In the “initState()” method, initialize the animation controller and animation instance for the Tween Animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
animationController = AnimationController(vsync: this, duration: Duration(seconds: 10)); _animation = Tween<double>(begin: 0, end: 300) .chain(CurveTween(curve: Curves.elasticOut)) .animate(animationController) ..addListener(() { setState(() { }); }) ..addStatusListener((status) { if (status == AnimationStatus.completed) { animationController.reverse(); } else if (status == AnimationStatus.dismissed) { animationController.forward(); } }); animationController.forward(); |
Animation Controller: This class help us to controll the animation in a state with the predefined method in it. Some of the methods are as follows:
- reverse() -> Starts running this animation in reverse
- reset() ->Sets the controller’s value to lowerBound, stopping the animation
- stop() -> Stops running this animation
- dispose() ->Release the resources used by this object. The object is no longer usable after this method is called
Moreover, You can go through the all the method which included in this Animation controller class
3. Finally, Use the animation in View
However, You can use this animation in multiple places for enhancing the user experience like in image gallery, in image slider, etc. I have used it for showing animation on the small block of the container.
|
1 2 3 4 5 6 7 |
home: Center( child: Container( color: Colors.blue, height: _animation.value, width: _animation.value, ), ), |
Output:
In conclusion
In this blog, we have discussed Tween Animation In Flutter
I hope it will help you out in understanding and get a brief idea about it.
You can also go through the Flutter Dev for more understanding.
Thank you for reading!!