Tween Animation In Flutter

In this blog, we will learn how to implement Tween Animation In Flutter without 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

1. Firstly, 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

2. Now, Create and Initialize the Animation controller

Now, In the “initState()” method, initialize the animation controller and animation instance for the Tween Animation.

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: 

1. reverse() -> Starts running this animation in reverse 
2. reset() ->Sets the controller’s value to lowerBound, stopping the animation 
3. stop() -> Stops running this animation
4. 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.

Output: 

In conclusion

In this blog, we have discussed Tween Animation In Flutter

I hope it will help you out in understanding and getting a brief idea about it.

You can also go through the Flutter Dev for more understanding

Thank you for reading!!