Using animation in Flutter

After learning the basics of Dart, and the basic usage of Flutter framework to develop an app, the next step would be to make it more user friendly. Hence, animation comes to mind, the play of how the widgets in an app react to Gesture control can be customized using animation.

Keeping in mind, the increasing struggle to find and maintain positivity in these trying times, I decided to start working on developing an app to display positive affirmations. I have used the basic function, ‘Curves.elasticInOut’ from the class ‘CurvedAnimation’ in the flutter framework. The transition seen beside occurs when the affirmations are tapped.

There were certain calculations to be kept in mind, regarding the change in size of the animated widget, along with the placement and change in size of the text it contains so as to maintain a clean UI.

Snippets of the code are shared below. And any suggestions and feedback would be much appreciated!

Here, I have used a Stateful Widget, and extended its state using SingleProviderStateMixin. I have used two variables to store the outputs of AnimationController(), and CurvedAnimation.

I have further made use of the above functions in another function, it basically integrates the animation with the basic widgets I have used earlier to decorate the text boxes.

Hope this was educative! Have a nice day!