Overview:

In this Guide I'll share how to create a Rotating Image in Flutter. Basically main motive of this tutorial is to teach how to create Animations in Flutter. So with the help of this Image Rorating Guide. I will teach you Flutter Animations. Flutter animations are popular and give an attractive look to your Flutter Application.



How to Use Ticker Provider State Mixin:

Ticker is very important for Flutter Animations. It provides a great way to manage tickers in animation. Basically Ticker are some objects that call a callbacks. These Tickers are very useful in Flutter Animations. They also allows Flutter Developers to control the Speed and timings of the Animation.

So in Flutter use Ticker Provider State Mixin use the with keyword and call these Ticker keywords as shown below. 

class _jikerState extends State<Jiker> with TickerProviderStateMixin {


In the above code example as you can see i use With Keyword and than call the Ticker_Provider_State_Mixin. 

Create instance of Animation Controller:

We use Animation Controller to Control the timing of our Animation and the second reason is to manage the animation. There are different others uses of Animation Controller but recently we are talking about animations. So now create the instance of Animation Controllers.

late AnimationController _animationController;
  late Animation<double> animation;


We simply use the late modifier and than we call AnimationController and than we create the instance of Animation Controller. Same thing we do with ANimation we call the Animation and than we simply create the instance. 

We are using late Modifier the reason is in the above code you see we just create the instance not declaring anything so that's why we are using late modifier. Late modifier mean we tell Flutter SDK that we will use these Variables later.



Creating Image Rotating Animation:

We will create the simple animation just for your understanding. In this Animation we just rotate the image in X-Axis. This animation is so simple but looks very amazing so just paste the code inside Init State () method than i will explain how this code is actually working. 

void initState() {

    _animationController =
        AnimationController(
        duration: Duration(seconds: 5),
        vsync: this);
   

    animation = CurvedAnimation(
        parent: _animationController,
        curve: Curves.fastEaseInToSlowEaseOut);

    super.initState();
  }


Explanation:

First of all keep in mind add this code inside init state method. If you want to write this code professionally than simply create a new method and paste the _animationController and _animation code in it. And than call this method inside Init State. This is a good way to manage your code.

If you focus on this code you will notice i assign the Animation Controller to _animationController which is the instance of Animation Controller and inside this method i use the animation duration and than vsync which is equal to this keyword. And in duration we give the seconds to our animation that how much time our Animation Show. I set it to 5 Seconds but it totally depends on you. 

And after that i use animation instance and set it equal to Curved Animation. There are alot of Animations are available in flutter but i am using Curved Animation for rotating the image.



Inside Curved Animation we see two required parameters one is parent and second is curve. In parent we assign the _animationController (Animation Controller will control this animation like duration of this Animation etc). Than in Curve we assign the animation the animation is Curves.fastEaseInToSlowEaseOut(). I already mention there are alot of Animations are available so try it yourself and  explore more animation and make it more attractive. This is just for your understanding.

Add this Animation on Image:

Now final step is to add animation on the image. First of all add one image in assets file and than mention this Image in Pub Spec file. Create a new Image widget in the center of the screen it depends on your Load the Image from URL or from Assets it's totally up to you. wrap the image with RotationTransition Widget. For better understanding check this code.


 RotationTransition(
        animation:  animation
        child: Center (
          child: Image.network("URL of Image"),
        )
        );

If you see Rotation Transition has one animation parameter so here we assign the animation instance that we created in the first step. Basically Rotation Transition will use our created animation (Curved Animation) and inside Animation we declare _animationController as parent so _animationController will control the whole Animation. If you remember We set the 5 Seconds timer so animation will run only for 5 seconds.   

Where we use Animations in Flutter:

In our Flutter Applications we use Flutter Animations like if you create a Sign up button and you want when some one click on this button than show a moving animation inside button so user will get notified yeah signup is now processing. Same thing if you create a Spin wheel in your Flutter Applications so obviously spin wheel animation is spinning animation so we use this starategy to create a spinning wheel in our Flutter Application. 




If you are working on a Restaurant application than add some animation on Pizza, Burger and some moving Pizza and burgers in your application so in this way you will attract more users. Same situation is for our Ecommerce Application. Show Rotating Mobile Phones and other products in your Flutter Ecommerce Application and attract more Customers. So there are alot of uses of Flutter Animation in App Development you can also use this in Web Apps , Desktops Apps.   

Conclusion:

As you can see how easily we Rotate the Image in Flutter Application using Flutter Animations. So it's proved Animating in Flutters are quite easy but they need your focus. Spend your time with Flutter Animation and Create more amazing Animations in Flutter App.