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.