The Transform widget
To apply 2D and 3D transforms to a widget, wrap it with a
Transform widget. This takes a few arguments:
- transform: a
Matrix4object that represents the transform we want
- origin: the origin of the coordinate system (relative to the upper left corner) in which to apply the matrix.
- alignment: see AlignmentGeometry
- child: the child widget to transform
For a complete reference, this is an excellent article:
Chaining matrix transforms
You can chain or multiply multiple transforms together.
Matrix4 is a Dart class that represents a 4x4 matrix and we can use it to manipulate the position of our widgets in 3D space.
Matrix4 overrides the
* operator, meaning that you can write code like this:
Matrix4.translationValues(50, 0, 0) * Matrix4.rotationZ(pi / 4)
When you do this, the child widget will be translated first, then rotated on the Z axis.
I prefer an alternative syntax that relies on the Dart cascade operator:
Matrix4.identity() // make sure to use *double* values and *not* int, otherwise you'll get UnimplementedError ..translate(50.0, 0.0, 0.0) ..rotateZ(pi / 4),
On a final note:
Transforms do not affect the layout of any widgets. If we translate, scale, or rotate a widget, this does not have any effect on any widgets that are around it.