Flutter - Using RotatedBox Widget Examples

This tutorial gives you examples of how to use RotatedBox widget in Flutter.

How to rotate a widget in Flutter by number of quarter turns? This tutorial shows you how to do it by using RotatedBox widget. Flutter's RotatedBox provides an easy way for us to rotate any widget by number of quarter turns. Below are some examples of how to use RotatedBox.

Using RotatedBox Widget

Here is the constructor you need to use.

  const RotatedBox({
    Key key,
    @required this.quarterTurns,
    Widget child,
  })

There is only one required attribute. You have to pass quarterTurns which is an integer to specify how many clockwise quarter should be applied to the widget which is passed as child.

  RotatedBox(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    quarterTurns: 1,
  )

Output:

Below is the result with quarterTurns value of 2.

Below is the result with quarterTurns value of 3.

Below is the result with quarterTurns value of 4. It's the same as not applying any rotation.

If you set the quarterTurns value to 5, it's the same as quarterTurns value of 1. In other words, we can think that the rotation depends on the 'mod 4' result of the quarterTurns because there are 4 quarters in one full rotation.

RotatedBox Properties

• Key key: The widget key, used to control if it should be replaced.
• int quarterTurns *: The number of clockwise quarter turns to be applied on the child.
• Widget child: The widget under this widget in tree, it will be rotated based on the value of quarterTurns

You can also read about:

• Transform.rotate, a named constructor for rotating a widget by the given angle.