Rotate an image in Flutter – Flutter AnimationController controls animations. It lets you set the animation duration and start, stop, and reverse it. AnimationController creates continuous picture rotation animations. The controller repeats the animation forever for the chosen length. The AnimationController creates an Animation object to rotate the image. The Animation object’s changing value updates the Transform widget’s rotation angle.
The AnimationController is excellent for building complicated Flutter animations, including rotating images.
Flutter AnimationController and Transform allow rotating images:
- Create an AnimationController object:
AnimationController _animationController;
- Initialize the controller in the initState() method:
@override void initState() { super.initState(); _animationController = AnimationController( duration: Duration(seconds: 2), vsync:this, )..repeat(); }
- Create an Animation object:
Animation<double> _animation = Tween<double>( begin: 0, end: 1, ).animate(_animationController);
- Wrap the image in a Transform widget:
Transform.rotate( angle: _animation.value * 2 * pi, child: Image.asset('assets/images/my_image.png'), ),
- Dispose the controller in the dispose() method:
@override void dispose() { _animationController.dispose(); super.dispose(); }
Here’s a full demo that spins an image on a user’s tap:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Image Rotation Example', home: Scaffold( appBar: AppBar( title: Text('Image Rotation Example'), ), body: Center( child: MyImageWidget(), ), ), ); } } class MyImageWidget extends StatefulWidget { @override _MyImageWidgetState createState() => _MyImageWidgetState(); } class _MyImageWidgetState extends State<MyImageWidget> with SingleTickerProviderStateMixin { AnimationController _controller; Animation<double> _animation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); _animation = Tween<double>( begin: 0.0, end: 1.0, ).animate(_controller); } @override void dispose() { _controller.dispose(); super.dispose(); } void _onImageTapped() { if (_controller.status == AnimationStatus.completed) { _controller.reverse(); } else { _controller.forward(); } } @override Widget build(BuildContext context) { return GestureDetector( onTap: _onImageTapped, child: RotationTransition( turns: _animation, child: Image.asset('assets/my_image.png'), ), ); } }
In this example, we’ve created a new widget MyImageWidget
 that rotates an image when the user taps on it. We’ve used a GestureDetector
 to detect the tap event and call _onImageTapped
 method when the user taps on the image.
In _onImageTapped
, we check the animation controller’s status and call either _controller
based on what we find. forward()
 or controller. reverse()
lets you start or stop the animation and turn it around.
We’ve also added a few other widgets like MaterialApp
, Scaffold
, and AppBar
 to provide a complete example. You can change the widgets to suit your needs.
Conclusion
It’s easy and straightforward to rotate an image in Flutter. You can use the Transform widget to rotate your image by telling it how many radians or degrees to turn. You can also use the RotatedBox widget to turn your picture a certain number of quarter turns.