Notes

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 Matrix4 object 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:

• Advanced Flutter: Matrix4 And Perspective Transformations

Chaining matrix transforms

You can chain or multiply multiple transforms together.

In fact, 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.