Flutter - Using Transform.rotate Examples

How to use Transform.rotate named constructor in Flutter? Find out in this tutorial.

What if you need to display a widget rotated at a certain degree or radian. Flutter's Transform widget has a named constructor Transform.rotate that allows you to easily rotate a widget.

Using Transform.rotate

Here's the named constructor to be used.

  Transform.rotate({
    Key key,
    @required double angle,
    this.origin,
    this.alignment = Alignment.center,
    this.transformHitTests = true,
    Widget child,
  })

There is only one required parameter, angle, which specifies the clockwise rotation to be applied to the child widget.

  Transform.rotate(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    angle: 2,
  )

Output:

Flutter - Transform.rotate - 2 radian

 

Rotating in Degrees

If the value is in degree, you need to convert the degree value to radian first.

  Transform.rotate(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    angle: radians(45),
  )

Output:

Flutter - Transform.rotate - 45 degree

 

Setting Alignment

By default, the rotated child is aligned to the center. You can pass alignment argument to change it.

  Transform.rotate(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    angle: radians(45),
    alignment: Alignment.topLeft,
  )

Output:

Flutter - Alignment - 45 degree

 

Setting Origin Offset

It's also possible to set the origin of the coordinate system by passing origin argument which is of type Offset.

  Transform.rotate(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    angle: radians(45),
    origin: const Offset(100, 100),
  )

Output:

Flutter - Transform.rotate - Offset

 

Transform.rotate Parameters

  • Key key: The widget key, used to control if it should be replaced.
  • double angle *: The clockwise rotation angle to be applied.
  • Offset origin : The origin of the coordinate system.
  • Alignment alignment: The alignment of the origin. Defaults to Alignment.center.
  • bool transformHitTests: Whether to apply the transformation when performing hit tests. Defaults to true.
  • Widget child: The widget under this widget in tree, it will be scaled and positioned according to fit and alignment values.

 

You can also read about: