This guide will walk you through different methods to rotate a widget in Flutter with practical examples.
Rotating a widget in Flutter is a common task that can be accomplished in several ways, depending on your needs.
Whether you’re creating a custom UI effect, developing a game, or simply experimenting with Flutter’s powerful widgets.
Table of Contents
Steps to Rotate a Widget in Flutter
In Flutter, rotating a widget means applying a transformation that rotates the widget by a specified angle. Flutter provides built-in widgets and tools to easily rotate widgets either statically or dynamically, giving you flexibility and control over your UI.
Using Transform rotate
The Transform.rotate
widget is the most straightforward way to rotate a widget in Flutter. It allows you to rotate any widget by a given angle, which is specified in radians.
In this example, the Transform.rotate
widget is used to rotate an Icon
by 45 degrees.
Here, a Container
is rotated by 90 degrees, demonstrating how you can rotate more complex widgets.
Rotating with AnimatedRotation
For cases where you want to animate the rotation, Flutter provides the AnimatedRotation
widget. This widget allows you to rotate a widget over a specified duration smoothly.
Example: Rotating a widget in Flutter
import 'package:flutter/material.dart';
class AnimatedRotationExample extends StatefulWidget {
@override
_AnimatedRotationExampleState createState() => _AnimatedRotationExampleState();
}
class _AnimatedRotationExampleState extends State<AnimatedRotationExample> {
double _angle = 0;
void _rotateImage() {
setState(() {
_angle += 90; // Rotate by 90 degrees
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Animated Rotation Example")),
body: Center(
child: AnimatedRotation(
duration: Duration(seconds: 1),
turns: _angle / 360,
child: Image.network(
'https://cdn.prod.website-files.com/654366841809b5be271c8358/659efd7c0732620f1ac6a1d6_why_flutter_is_the_future_of_app_development%20(1).webp',
width: 100,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _rotateImage,
child: Icon(Icons.rotate_right),
),
);
}
}
void main() => runApp(MaterialApp(home: AnimatedRotationExample()));
In this example, pressing the floating action button rotates the image by 90 degrees with a smooth animation.
Output:
Handling Rotation with Custom Widgets
If you need more control or want to rotate multiple widgets in a custom way, you can create your own widget that manages rotation.
Example: Custom Rotating Widget
import 'package:flutter/material.dart';
class CustomRotatingWidget extends StatefulWidget {
final Widget child;
const CustomRotatingWidget({Key? key, required this.child}) : super(key: key);
@override
_CustomRotatingWidgetState createState() => _CustomRotatingWidgetState();
}
class _CustomRotatingWidgetState extends State<CustomRotatingWidget>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat(); // Continuous rotation
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
child: widget.child,
builder: (context, child) {
return Transform.rotate(
angle: _controller.value * 2 * 3.1415926535897932,
child: child,
);
},
);
}
}
class CustomRotationExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Custom Rotating Widget Example")),
body: Center(
child: CustomRotatingWidget(
child: Icon(Icons.sync, size: 100, color: Colors.green),
),
),
);
}
}
void main() => runApp(MaterialApp(home: CustomRotationExample()));
This example shows how to create a custom widget that continuously rotates its child.
Output:
Combining Rotations with Other Transformations
Rotations can also be combined with other transformations, such as scaling or translation, to create complex effects.
Example: Combining Rotation and Scale
import 'package:flutter/material.dart';
class CombinedTransformExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Combined Rotation and Scale Example")),
body: Center(
child: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateZ(45 * 3.1415926535897932 / 180) // Rotate by 45 degrees
..scale(1.5), // Scale by 1.5 times
child: Container(
width: 100,
height: 100,
color: Colors.purple,
),
),
),
);
}
}
void main() => runApp(MaterialApp(home: CombinedTransformExample()));
Here, a Container
is both rotated and scaled, demonstrating how you can layer multiple transformations.
Output:
Also read:
- Write an App to Implement the Bubble Sort Algorithm in Flutter.
- Creating a Basic Class and Object in Flutter
Conclusion
Rotating widgets in Flutter is a powerful tool that can enhance your application’s UI and user experience. Whether you’re using Transform.rotate
, AnimatedRotation
, or custom solutions, Flutter’s flexibility allows you to create a wide range of effects with ease.