Created a small animation in flutter…

Sanat Dash
3 min readSep 30, 2020

So, lets begin,

I have used AnimationController class, for this task to complete,

After creating my project and opening my project folder , this my main.dart, here I have used route in my material app to myanimation.dart where i created my scaffold statefull widget.

To use AnimationController we need to use ‘Flutter widget with AnimatedController ’ which is basically a stateful class with extra functions like initState(), dispose(), which all are necessary for animation controller.

Now lets begin with myanimation.dart

We need to work in the initState()

c = AnimationController(vsync: this, duration: Duration(seconds: 7));

here, i have set the duration to 7 seconds, and used a variable c to store the data of this function.

counter = CurvedAnimation(parent: c, curve: Curves.bounceInOut)

..addListener(() {

setState(() {




Then after this I used a var counter , and the CurvedAnimation function where i have passed the value of parent: as c and used the bounceInOut() effect.

and then as the controller is in paused state to make the value run in loop I used c.repeat();

In my scaffold , I used stack widget, containers, etc. to decorate the borders , border radius , colors and etc.

In the main container which Iwanted to animate, I used a GestureDecorator, whic helps to pause or play the animation,

GestureDetector(onTap: () {if(c.isAnimating) {c.stop();} else {c.repeat();}},

Then I used the RotationTransition() widget passing the value of turns as counter. and alignment as centre.

I made the width and height of the container fixed.

added some colors,

And finally in the text style,I used the counter.value to make the transition look complete.

TextStyle(fontSize: 50.0 * counter.value,color:,

Final app which I have created…

In the above video When the animation pauses the GestureDetector() functions.

when I tap on the container the value of counter is set to stop().

Thank you for reading my work.