The AnimationController class is used to perform various type of animations in flutter. Today we are going to create image rotation animation in flutter using AnimationController class. We are using Transform.rotate() property of AnimationController to rotate image view. We would also give the functionality of app user to start and stop rotation animation using animationController.repeat() and animationController.stop() method. So in this tutorial we would Flutter Image Rotate Animation Android iOS Example Tutorial.
Contents in this project Flutter Image Rotate Animation Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root view MyApp class extends with State less widget. In this class we would call the RotateImage() class as child of Center widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.white, body: Center( child: RotateImage() ) ) ); } } |
4. Create a class named as RotateImage extends StatefulWidget. In this class we would make the createState() method and define the RotateImageState class name along with it.
|
1 2 3 4 |
class RotateImage extends StatefulWidget { @override RotateImageState createState() => new RotateImageState(); } |
5. Create a class named as RotateImageState extends State. We would extends SingleTickerProviderStateMixin class with this class. The SingleTickerProviderStateMixin class is used to create animation controller in given class tree.
|
1 2 3 4 5 |
class RotateImageState extends State with SingleTickerProviderStateMixin { } |
6. Creating AnimationController object in RotateImageState class.
|
1 |
AnimationController animationController; |
7. Creating initState() method. Now we would define the animationController duration here and set the animation rotation speed using Duration. Duration will allow us to manage one Rotation speed in given seconds.
|
1 2 3 4 5 6 7 8 9 10 |
void initState() { super.initState(); animationController = new AnimationController( vsync: this, duration: new Duration(seconds: 5), ); animationController.repeat(); } |
8. Creating a function named as stopRotation(). Inside the function we would call the stop() method to stop the animation at current state.
|
1 2 3 4 |
stopRotation(){ animationController.stop(); } |
9. Creating a function named as startRotation(). Inside the function we would call the repeat() method to start the animation continuously again if the animation is stopped.
|
1 2 3 4 |
startRotation(){ animationController.repeat(); } |
10. Creating Widget build area in RotateImageState class. Now we would firstly create a Column widget to put multiple children. Now we would make the Container view and make a child named as AnimatedBuilder(). We would put the Image widget as child of AnimatedBuilder widget. We would also create 2 Raised buttons and call the start and stop rotation animation functions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( color: Colors.white, alignment: Alignment.center, child: AnimatedBuilder( animation: animationController, child: Container( height: 150.0, width: 150.0, child: Image.network('https://flutter-examples.com/wp-content/uploads/2020/01/yin_yang.png', width: 150, height: 150, fit: BoxFit.contain,), ), builder: (BuildContext context, Widget _widget) { return Transform.rotate( angle: animationController.value * 6.3, child: _widget, ); }, )), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 10), child: RaisedButton( onPressed: () => startRotation(), child: Text(' Start Rotation '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 10), child: RaisedButton( onPressed: () => stopRotation(), child: Text(' Stop Rotation '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), ]); } |
11. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.white, body: Center( child: RotateImage() ) ) ); } } class RotateImage extends StatefulWidget { @override RotateImageState createState() => new RotateImageState(); } class RotateImageState extends State with SingleTickerProviderStateMixin { AnimationController animationController; @override void initState() { super.initState(); animationController = new AnimationController( vsync: this, duration: new Duration(seconds: 5), ); animationController.repeat(); } stopRotation(){ animationController.stop(); } startRotation(){ animationController.repeat(); } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( color: Colors.white, alignment: Alignment.center, child: AnimatedBuilder( animation: animationController, child: Container( height: 150.0, width: 150.0, child: Image.network('https://flutter-examples.com/wp-content/uploads/2020/01/yin_yang.png', width: 150, height: 150, fit: BoxFit.contain,), ), builder: (BuildContext context, Widget _widget) { return Transform.rotate( angle: animationController.value * 6.3, child: _widget, ); }, )), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 10), child: RaisedButton( onPressed: () => startRotation(), child: Text(' Start Rotation '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 10, 20, 10), child: RaisedButton( onPressed: () => stopRotation(), child: Text(' Stop Rotation '), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), ]); } } |
Screenshots:
