Created a small animation in flutter…
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(() {
print(counter.value);
});
});
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: Colors.black),
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.
#flutter#linuxworld#VimalDaga
#task3
