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

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

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

The types of Transform widgets are:

Transform (default constructor)

Transform.rotate

Transform.scale

Transform.translate

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.

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,

),

),

);

}

If you are interested in flutter translate example, check this website to learn more about flutter translate.