Flutter Image Rotate Animation Android iOS Example Tutorial

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.

2. Create void main runApp() method and here we would call our main MyApp class.

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.

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.

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.

6. Creating AnimationController object in RotateImageState class.

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.

8. Creating a function named as stopRotation(). Inside the function we would call the stop() method to stop the animation at current state.

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.

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.

11. Complete source code for main.dart file:

Screenshots:

Flutter Image Rotate Animation

Leave a Reply

Your email address will not be published.