How do we rotate in Flutter

It sounds crazy. But we can rotate any Widget in Flutter quite easily. In fact, a few lines of code does the magic.

Do not believe it?

Well, let us try.

For an example, here we will rotate an Image. Certainly we can rotate any other Widget.

We can do this in two ways. Either we can use a Stateful Widget. Or we can use the Provider package to manage the State.

Each rotation requires a change in State. Therefore, we need to manage the State. That is our first requirement.

It is another example of Implicit Animation.

Basically, the Animation in Flutter is of two types. The Implicit and the Explicit.

The Implicit Animation refers to the built-in Animated Widgets. Moreover, they are easier than the Explicit Animation.

Therefore, today, we will experiment with one such Implicit Animation, We have seen in our previous section how we can scale an Image with the AnimatedScale.

The Animated Rotation Widget does the magic. The Animated Rotation is an animated version of Transform.rotate. This Constructor creates a Widget that rotates its Child Widget uniformly.

The inner mechanism is a little bit complicated. However, we can try to understand it.

Using the Animated Rotation Widget we can control two properties.

Firstly, we can decide the duration. It might be for 1 seconds. Or, 2 seconds. May be more, or less.

Secondly, we can decide the angle of rotation. The Transform.rotate gives the rotation in clockwise radians. As a result, the Image Widget as its Child Widget rotates clockwise.

Now, as a prerequisite, the “angle” argument must not be NULL.

Again this “angle” is related to the “turns” argument of the AnimatedRotation Widget.

If we look at the definition of the AnimatedRotation Widget, what do we see?

This Widget inherits properties from the ImplicitlyAnimatedWidget.

Moreover, three arguments, “turns”, “curve”, and “duration” must not be NULL.

class AnimatedRotation extends ImplicitlyAnimatedWidget {
  /// Creates a widget that animates its rotation implicitly.
  ///
  /// The [turns] argument must not be null.
  /// The [curve] and [duration] arguments must not be null.
  const AnimatedRotation({
    Key? key,
    this.child,
    required this.turns,
    this.alignment = Alignment.center,
    this.filterQuality,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  }) : assert(turns != null),
        super(key: key, curve: curve, duration: duration, onEnd: onEnd);
....
/// this code is incomplete and for demonstration
/// to read full source code please visit Flutter's GitHub repository

How do you rotate 360 degrees in Flutter?

Why 360 degrees? We can rotate the Image any degree.

Let us start with 180 degrees. Then we can try 90 degrees.

Since we are using the Provider package, we must add the dependencies first.

dependencies:
  animations: ^2.0.2
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  google_fonts: ^2.2.0
  material_design_icons_flutter: ^5.0.6595
  path: ^1.8.0
  provider: ^6.0.2
  sqflite: ^2.0.1

If we start with 180 degrees, we need to define that in our Model class.

class ChangeRotation with ChangeNotifier {
  double turns = 1.0;
  void changeRotation() {
    turns = turns += 1.0 / 2.0;
    notifyListeners();
  }
}

After that, we can Provide that “turns” argument in our Animated Rotation Widget.

Widget build(BuildContext context) {
    final ChangeRotation turns = Provider.of<ChangeRotation>(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          child: const Text('turns Image'),
          onPressed: turns.changeRotation,
        ),
        Padding(
          padding: const EdgeInsets.all(50),
          child: AnimatedRotation(
            turns: turns.turns,
            duration: const Duration(seconds: 1),
            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'),
              ),
            ),
          ),
        ),
      ],
    );
  }

We can see that the “turns” and the “duration” argument are not NULL.

As a result, we see the effect in the Image.

Let us change the angle of rotation in our Model class. So that the Image will rotate 90 degrees.

class ChangeRotation with ChangeNotifier {
  double turns = 1.0;
  void changeRotation() {
    turns = turns += 1.0 / 4.0;
    notifyListeners();
  }
}

As a result, the Image rotates 90 degrees.

To get the full code snippet please visit the respective GitHub repository.

This example of Animated Rotation is an Implicit Animation. However, we can do the same thing explicitly. To do that we will use the RotationTransition.

In the next section we will discuss that.

So stay tuned. Happy Fluttering!

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter