Rotate, Scale, Skew or Translate Widgets in Flutter using Transform

This articles describes how easily you can rotate, scale or translate widgets in Flutter. We can do that with the
help of Transform Widget.

Watch Demo

Below is the demo of the app that we are going to build.

https://youtu.be/Fw7DJV-QlkI

Watch Video Tutorial

The types of Transform widgets are:

• Transform (default constructor)
• Transform.rotate
• Transform.scale
• Transform.translate

1. Rotate

Our Screen will have a Slider to change the value of rotate or scale, translate or skew. Then three container widgets that does all the four transformations.
So Let’s start with rotate.

Below function returns a container that implements Rotate Transform.

 Container rotate() {
    return Container(
      child: Transform.rotate(
        angle: sliderVal,
        origin: Offset(0.0, 0.0),
        child: Container(
          height: 50.0,
          width: 50.0,
          color: Colors.red,
        ),
      ),
    );
  }

You can change the offset co change the point at which you want to rotate the widget.

   origin: Offset(100.0, 0.0),

This applies to almost all the ‘Transform’ variations.

Scale

Below function does a scale on the Widget. Change the ‘scale’ value to change the scale for the Widget.

   Container scale() {
    return Container(
      child: Transform.scale(
        scale: sliderVal == 0 ? 1 : sliderVal / 50,
        origin: Offset(0.0, 0.0),
        child: Container(
          height: 100.0,
          width: 100.0,
          color: Colors.green,
        ),
      ),
    );
  }

Translate

  Container translate() {
    return Container(
      child: Transform.translate(
        offset: Offset(200.0, 110.0),
        child: Container(
          height: 100.0,
          width: 100.0,
          color: Colors.yellow,
        ),
      ),
    );
  }

Skew

You can do a skew(), skewX(), or skewY() on the Transform.

  skew() {
    return Container(
      child: Transform(
        transform: Matrix4.skewX(sliderVal / 100),
        child: Container(
          height: 100.0,
          width: 100.0,
          color: Colors.blue,
        ),
      ),
    );
  }

Other Transformations

Below methods does a 3D transformation on a square box.

  threeD() {
    return Container(
      child: Transform(
        transform: Matrix4.identity()
          ..setEntry(3, 2, sliderVal / 1000)
          ..rotateX(3.14 / 20.0),
        alignment: FractionalOffset.center,
        child: Container(
          height: 100.0,
          width: 100.0,
          color: Colors.blue,
        ),
      ),
    );
  }

The default constructor helps you do more transformations. You can freely explore those.
Please leave your valuable comments below

Source Code

Get the source code from by repository

Thanks for reading.

Please leave your valuable comments below this tutorial.
Watch the video tutorial to see the transform widget in action.