In this article, we will explore the RotationTransition In Flutter. We will see how to implement a demo program to create a RotationTransition box and also shows a display animation in your flutter applications.
Table Of Contents:
How to declare Animation for RotationTransition
How to use RotationTransition Widget in Flutter?
Rotation Transition to Rotate Anticlockwise Flutter
What is RotationTransition?:
RotationTransition Widget is a widget that is used to animate the rotation of the widget.
Default Constructor of it will have code snippet as below:
RotationTransition({
Key? key,
required Animation turns,
Alignment alignment = Alignment.center,
FilterQuality? filterQuality,
Widget? child,
});In Above Constructor all the attributes marked with @requuired must not be empty so in this constructor turns must not be empty.
Properties:
There are some properties of RotationTransition are:
1:-key: This attribute key controls how one widget replaces another widget in the tree.
2:-turns: This attribute has a datatype Animation that is used to control the rotation of the child.
3:-alignment: This attribute is used to define the alignment of the origin of the coordinate system around which the rotation occurs, relative to the size of the box.
4:-child: This attribute is used to define the widget below this widget in the tree.
How to declare Animation for RotationTransition:-
Firstly we have to extend the TickerProviderStateMixin.
extends State<Rotation> with TickerProviderStateMixin{After that we have to declare the variables
late AnimationController _controller;
late Animation<double> _animation;And then we have to initialize those variables in a initState()
void initState() {
// TODO: implement initState
super.initState();
_controller=AnimationController(vsync:this,duration: Duration(seconds: 10));
_animation=CurvedAnimation(parent: _controller, curve: Curves.easeIn,);
_controller.repeat();
}After initialization, we have to dispose of the animation controller because This reduces the likelihood of leaks. When used with a StatefulWidget, it is common for an AnimationController to be created in the State. initState method and then disposed in the State.
void dispose() {
_controller.dispose();
// TODO: implement dispose
super.dispose();
}How to use RotationTransition Widget in Flutter?:
The following code will show you how to make use of the RotationTransition Widget.
class _RotationState extends State<Rotation> with TickerProviderStateMixin{ late AnimationController _controller;
late Animation<double> _animation;@override
void initState() {
// TODO: implement initState
super.initState();
_controller=AnimationController(vsync:this,duration: Duration(seconds: 10));
_animation=CurvedAnimation(parent: _controller, curve: Curves.easeIn,);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
// TODO: implement dispose
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RotationTransition(turns: turnsTween.animate(_controller),,
child: Center(child: Image.network('assets/img/squarebox.png',height: 200,width: 200,))),
],
),
),
);
}
}In this RotationTransition constructor has turned as a parameter that takes animation as a value, and in animation, we can use multiple curves like easeIn, ease, bounceIn, bounceInOut, bounceOut, decelerate, easeInCubic, and many more types.
_controller=AnimationController(vsync:this,duration: Duration(seconds: 10));
_animation=CurvedAnimation(parent: _controller, curve: Curves.easeIn,);Just changes curves you can see multiple type & by duration, you can decide how much time the animation will work. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Rotation Transition to Rotate Anticlockwise Flutter:
When the widget rotates clockwise controller’s value goes from 0.0 to 1.0. To rotate in the opposite direction you need value to go from 1.0. to 0.0.To achieve that, you can set up Tween:
final Tween<double> turnsTween = Tween<double>(
begin: 1,
end: 0,
);We have to declare Tween which will provide us the starting & ending value
RotationTransition(turns: turnsTween.animate(_controller),,
child: Center(child: Image.network('assets/img/squarebox.png',height: 200,width: 200,))),When we run the application, we ought to get the screen’s output like the underneath screen video
Conclusion:
In this article, we discussed how this RotationTransition is being used, what are all the parameters that you can use to customize the display of it, and also it provides multiple features to customize the widget.
I have explained the basic structure of the RotationTransition in a flutter; you can modify this code according to your choice. This was a small introduction to RotationTransition On User Interaction from my side, and it’s working using Flutter.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the RotationTransition:
GitHub – flutter-devs/flutter_RotationTransition
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
