Getting started with animation in Flutter
One of the main attractions of a beautiful UI is animations. The subtle animations make the mobile application appear more responsive.
In this article I would like to lay down the basics of animation in flutter and it will act as the foundation of creating more complex responsive animations.
We would be creating a rotating flutter logo.
We first create the classes for the animation. We create a StatefulWidget because the page needs to be dynamic so as to accommodate the animation.
This code tells the app that we would be providing the animation and the Animation Controller allows us to control the functionality of the animation which we would be doing soon. The animations are highly dependent on time so we need a Ticker which keeps track of the time and hence we use Single Ticker. It is used to create a single animation on the page.
Everything in the flutter is maintained as a Widget Tree. the initstate is called once only and it is used to override the initial state of the widget. The framework will call this method exactly once for each State object it creates. If we override this,we have to make sure your method starts with a call to super. initState().
Tween is useful if we want to interpolate across a range. To use a Tween object with an animation, we call the Tween object’s animate method and pass it the Animation object that we want to modify.
addlistener listens to events that can construct gestures, such as when the pointer is pressed, moved, then released or canceled.
After we have set the utilities we need to create the canvas using the Scaffold
We use the transform to rotate the image we specified using the Image.Network. The implementation of this code is very straightforward. We use the refresh icon to reset the _controller so that the animation begins again.
Again I would like to add that this tutorial is just to kick start the foundation of animation in flutter and there is a lot of things we can do using the controller. It depends on the usecase.
Thanks : )
