How to rotate an image using Flutter AnimationController and Transform?

Full example (null safe):

Press "go" makes the star icon spin until you press "stop".

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: MyHomePage(),    );  }}class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage>    with SingleTickerProviderStateMixin {  late AnimationController _controller;  @override  void initState() {    _controller = AnimationController(      duration: const Duration(milliseconds: 5000),      vsync: this,    );    super.initState();  }  @override  void dispose() {    _controller.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Demo"),      ),      body: Center(        child: Column(          children: <Widget>[            RotationTransition(              turns: Tween(begin: 0.0, end: 1.0).animate(_controller),              child: Icon(Icons.stars),            ),            ElevatedButton(              child: Text("go"),              onPressed: () => _controller.forward(),            ),            ElevatedButton(              child: Text("reset"),              onPressed: () => _controller.reset(),            ),          ],        ),      ),    );  }}

Step by step guide:

First, let your widget state class implement SingleTickerProviderStateMixin.

Secondly, define an AnimationController and don't forget to dispose it. If you are not yet using null-safe, remove the late keyword.

late AnimationController _controller;@overridevoid initState() {  _controller = AnimationController(    duration: const Duration(milliseconds: 5000),    vsync: this,  );  super.initState();}@overridevoid dispose() {  _controller.dispose();  super.dispose();}

Then wrap your Widget with RotationTransition.

RotationTransition(  turns: Tween(begin: 0.0, end: 1.0).animate(_controller),  child: Icon(Icons.stars),),

Finally, call methods on the AnimationController to start/stop animation.

• Run the animation once, use .forward
• Loop the animation, use .repeat
• Stop immediately, use .stop
• Stop and set it back to original rotation, use .reset
• Stop and animate to a rotation value, use .animateTo

Here my example of rotating image. I don't know - but maybe it suits for you

AnimationController rotationController;@overridevoid initState() {  rotationController = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);  super.initState();}//...RotationTransition(  turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),  child: ImgButton(...)//...rotationController.forward(from: 0.0); // it starts the animation

UPD - how to solve problem with Transform.rotate

In your case all works exactly as you've written - it rotates image from 0.0 to 1.0 (it's default parameters for AnimationController). For full circle you have to set upper parameter to 2 * pi (from math package)

import 'dart:math';//...animationController = AnimationController(vsync: this, duration: Duration(seconds: 5), upperBound: pi * 2);

Screenshot (Null Safe)

Full code:

import 'dart:math' as math;class _FooPageState extends State<FooPage> with SingleTickerProviderStateMixin{  late final AnimationController _controller;  @override  void initState() {    super.initState();    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat();  }  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: AnimatedBuilder(          animation: _controller,          builder: (_, child) {            return Transform.rotate(              angle: _controller.value * 2 * math.pi,              child: child,            );          },          child: FlutterLogo(size: 200),        ),      ),    );  }}