matrix4_transform

Description:

matrix4 transform

matrix4_transform #
Have you noticed the transform parameter in the Container and Transform widgets, that let you
move, rotate, resize and flip?
This package is 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: ...
);
copied to clipboard
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();
copied to clipboard
Then call the methods to transform it. For example:
Matrix4Transform()
.scale(1.5)
.upRight(35)
.rotate(pi/2);
copied to clipboard
In the end, call matrix4:
Matrix4 myMatrix
= Matrix4Transform()
.scale(1.5)
.upRight(35)
.rotate(pi/2)
.matrix4;
copied to clipboard
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);
copied to clipboard
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.

The Flutter packages I've authored:

async_redux
fast_immutable_collections
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

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


My article in the official Flutter documentation:

Understanding constraints

Marcelo Glasberg:
https://github.com/marcglasberg
https://linkedin.com/in/marcglasberg/
https://twitter.com/glasbergmarcelo
https://stackoverflow.com/users/3411681/marcg
https://medium.com/@marcglasberg