How do we rotate a transition in Flutter

There are many ways. Not one, but many ways to rotate a transition in Flutter. The most common is, certainly, the RotationTransition widget.

In this section, we will use the RotationTransition widget. This Widget animates the rotation of a widget.

However, as we just told, we can do the same thing with other Animation Widgets, as well.

We will see them later. One by one.

In fact, in our last section we have discussed how to rotate in Flutter. But, in that case, we used the Implicit Animation Animated Rotation Widget.

By the way, the Animated Rotation is an animated version of Transform.rotate.

Later we will see how we can rotate using the AnimatedBuilder with the Transform.rotate.

However, here we are using the RotationTransition widget along with the CurvedAnimation. Actually, the turns of the Rotation Transition Widget is animated by the CurvedAnimation.

What is Curved Animation?

The CurvedAnimation applies a curve to another animation. When we try to apply a non-linear Curve to an Animated Widget, the CurvedAnimation helps us.

To rotate forward and backward, we have used two properties of the Curved Animation.

late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
    reverseCurve: Curves.easeOut,
  );

The “curve” and the “reverseCurve” properties have made the rotation as we wanted.

Firstly, let us take a look at the screenshots where an image rotates clockwise.

Secondly, it rotates anti clockwise.

The first image represents the clockwise rotation.

First the clockwise rotation completes. After that the anti clockwise rotation starts.

Due to the properties of the CurvedAnimation, this simultaneous rotation takes place.

Through the explicitly defined Animation Controller we manage the duration and the reverse rotation.

late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 20),
    vsync: this,
  )..repeat(reverse: true);

And finally, we pas the CurvedAnimation to the “turns” argument of the RotationTransition widget.

 body: RotationTransition(
        turns: _animation,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(10),
              width: 250,
              height: 250,
              child: Image.network(
                  'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg'),
            ),
          ),
        ),
      ),

For full code please visit the respective GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter