Rotate image in Flutter

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:

1. Create an AnimationController object:

AnimationController _animationController;

2. Initialize the controller in the initState() method:

@override
void initState() {
 super.initState();
  _animationController = AnimationController(
   duration: Duration(seconds: 2),
   vsync:this,
  )..repeat();
}

3. Create an Animation object:

Animation<double> _animation = Tween<double>(
  begin: 0,
  end: 1,
).animate(_animationController);

4. Wrap the image in a Transform widget:

Transform.rotate(
  angle: _animation.value * 2 * pi,
 child: Image.asset('assets/images/my_image.png'),
),

5. 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.