matrix4_transform

matrix4_transform

Have you noticed the transform parameter in the Container and Transform widgets, which lets you move, rotate, resize, and flip?

This package provides a helper math class that makes it easy to create Matrix4 transformations.

Example:

// Rotates the Container 45 degrees and then
// translates 25 pixels to the right. 
Container(
   transform:
     Matrix4Transform()
       .rotateDegrees(45, origin: Offset(25, 25))
       .translate(x: 25)
       .matrix4,
   child: ...
);

To see it in action, run the example in the example tab.

How to use it

Matrix4Transform is immutable (in contrast, Matrix4 is mutable).

First create a Matrix4Transform:

Matrix4Transform();

Then call the methods to transform it. For example:

Matrix4Transform()
   .scale(1.5)
   .upRight(35)
   .rotate(pi/2);

In the end, call matrix4:

Matrix4 myMatrix 
   = Matrix4Transform()
     .scale(1.5)
     .upRight(35)
     .rotate(pi/2)
     .matrix4;                        

Note: The transformations will be applied in order, and their order may change the end result.

If you already have a matrix4 and want to further transform it, you can use the from constructor:

Matrix4 myMatrix = ...;

var myTransform = Matrix4Transform.from(myMatrix);

Methods you can use

• rotate(double angleRadians, {Offset origin})
• rotateDegrees(double angleDegrees, {Offset origin})
• rotateByCenterDegrees(double angleDegrees, Size size)
• rotateByCenter(_toRadians(angleDegrees), size)
• translate({double x = 0, double y = 0})
• translateOriginalCoordinates({double x = 0, double y = 0})
• scale(double factor, {Offset origin})
• scaleBy({double x = 1, double y = 1, Offset origin})
• scaleHorizontally(double factor)
• scaleVertically(double factor)
• translateOffset(Offset offset)
• up(double distance)
• down(double distance)
• right(double distance)
• left(double distance)
• direction(double directionRadians, double distance)
• directionDegrees(double directionDegrees, double distance)
• upRight(double distance)
• upLeft(double distance)
• downRight(double distance)
• downLeft(double distance)
• flipDiagonally({Offset origin})
• flipHorizontally({Offset origin})
• flipVertically({Offset origin})

And, of course:

• Matrix4 toMatrix4

Tween

A Matrix4TransformTween is provided in this package, and can be used in animations.

Animate it

A Matrix4Transform can be used to animate:

• AlignPositioned or AnimatedAlignPositioned widgets from the AlignPositioned package, that accept a Matrix4Transform directly. The center of rotation/scale can be defined by their alignment parameter.

• Any widget that accepts a Matrix4 transformation parameter, like Container, or AnimatedContainer. Note: Since Matrix4Tween will not animate linearly as you'd expect, it's possible that the intermediary transformations will be "strange", although the start and end should be correct.

---

Special thanks to Martin Kamleithner and Simon Lightfoot.

---

By Marcelo Glasberg

glasberg.dev
github.com/marcglasberg
linkedin.com/in/marcglasberg/
twitter.com/glasbergmarcelo
stackoverflow.com/users/3411681/marcg
medium.com/@marcglasberg

My article in the official Flutter documentation:

• Understanding constraints

The Flutter packages I've authored:

• async_redux
• provider_for_redux
• i18n_extension
• align_positioned
• network_to_file_image
• image_pixels
• matrix4_transform
• back_button_interceptor
• indexed_list_view
• animated_size_and_fade
• assorted_layout_widgets
• weak_map
• themed
• bdd_framework
• tiktoken_tokenizer_gpt4o_o1

My Medium Articles:

• Async Redux: Flutter’s non-boilerplate version of Redux (versions: Português)
• i18n_extension (versions: Português)
• Flutter: The Advanced Layout Rule Even Beginners Must Know (versions: русский)
• The New Way to create Themes in your Flutter App