How to Rotate a Widget in Flutter?

To make an image or other Widget Rotate in Flutter, you can use the RotationTransition widget together with an AnimationController. Here’s a complete example:

---

✅ Example: Rotating an Image Continuously

import 'package:flutter/material.dart';

void main() => runApp(RotatingImageApp());

class RotatingImageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RotatingImage(),
    );
  }
}

class RotatingImage extends StatefulWidget {
  @override
  _RotatingImageState createState() => _RotatingImageState();
}

class _RotatingImageState extends State<RotatingImage> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    )..repeat(); // Repeats the animation forever
  }

  @override
  void dispose() {
    _controller.dispose(); // Always dispose the controller!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Rotating Image")),
      body: Center(
        child: RotationTransition(
          turns: _controller,
          child: Image.asset('assets/your_image.png', width: 150, height: 150),
        ),
      ),
    );
  }
}

---

📦 Notes:

• Add your image to assets/ and declare it in pubspec.yaml.
• Use Image.network() instead of Image.asset() if you want to load from a URL.
• You can adjust duration for speed or use ..repeat(reverse: true) for back-and-forth rotation.

Could it rotate indefinetly – without Controller

In Flutter, infinite rotation requires an animation, and for animations, you do need an AnimationController. Flutter does not support infinite rotation without some kind of animation mechanism, and AnimationController is the standard way to do it.

However, if you’re trying to avoid the boilerplate of AnimationController, here are your options:

---

✅ Option 1: Use AnimationController (Recommended, as shown earlier)

• Clean
• Fine-grained control
• Native support for infinite loops

---

❗ Option 2: Use a Timer with Transform.rotate()

Not smooth, not recommended for real UI use — but possible if you want “manual” rotation logic.

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(ManualRotateApp());

class ManualRotateApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: ManualRotateImage());
  }
}

class ManualRotateImage extends StatefulWidget {
  @override
  _ManualRotateImageState createState() => _ManualRotateImageState();
}

class _ManualRotateImageState extends State<ManualRotateImage> {
  double _angle = 0;
  late final Timer _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(milliseconds: 16), (_) {
      setState(() {
        _angle += pi / 180; // increase angle (approx 1 degree)
      });
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform.rotate(
          angle: _angle,
          child: Image.asset('assets/your_image.png', width: 150),
        ),
      ),
    );
  }
}

---

🔍 Conclusion:

• No, Flutter doesn’t have a built-in way to infinitely rotate an image without an animation or timer.
• Best approach: use AnimationController with RotationTransition.