How to rotate an image using Flutter AnimationController and Transform?

Question

I have star png image and I need to rotate the star using Flutter AnimationController and Transformer. I couldn't find any documents or example for image rotation animation.

Any idea How to rotate an image using Flutter AnimationController and Transform?

UPDATE:

class _MyHomePageState extends State<MyHomePage>  with TickerProviderStateMixin {    AnimationController animationController;    @override   void initState() {     super.initState();     animationController = new AnimationController(       vsync: this,       duration: new Duration(milliseconds: 5000),     );     animationController.forward();     animationController.addListener(() {       setState(() {         if (animationController.status == AnimationStatus.completed) {           animationController.repeat();         }       });     });   }    @override   Widget build(BuildContext context) {     return new Container(       alignment: Alignment.center,       color: Colors.white,       child: new AnimatedBuilder(         animation: animationController,         child: new Container(           height: 80.0,           width: 80.0,           child: new Image.asset('images/StarLogo.png'),         ),         builder: (BuildContext context, Widget _widget) {           return new Transform.rotate(             angle: animationController.value,             child: _widget,           );         },       ),     );   } } 

Answer 1

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;  @override void initState() {   _controller = AnimationController(     duration: const Duration(milliseconds: 5000),     vsync: this,   );   super.initState(); }  @override void 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

Answer 2

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

AnimationController rotationController;  @override void 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);