Package detailsv4.0.1

matrix4_transform

A helper math class for easily creating Matrix4 transformations, which you can use in the Container's transform parameter and elsewhere.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 73.1K
Likes: 185
Pub points: 150

Install package

flutter pub add matrix4_transform

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A lightweight Dart utility package that simplifies the creation of Matrix4 transformations for 2D and 3D graphics in Flutter. It provides intuitive methods to build transformation matrices for use with widgets like Container via the transform parameter, enabling precise control over rotation, scaling, translation, and skewing. Ideal for animations, custom layouts, and interactive UI elements requiring advanced transforms. The package is platform-agnostic and integrates seamlessly into Flutter projects.

Use cases

Animating UI elements with complex transforms
Creating custom 2D/3D layouts
Building interactive gesture-based interfaces
Implementing camera or view rotations
Designing scalable game or visualization components

Key features

Simple, chainable matrix construction
Supports rotation, scale, translation, and skew
Intuitive API for common transform operations
Works directly with Container's transform property
Lightweight and dependency-free

Suitable for

Flutter developers needing precise matrix control
UI designers working on animated or interactive layouts
Game or visualization app creators
Beginners learning about 3D transforms in Flutter

Considerations

Not intended for heavy mathematical computations
Requires understanding of Matrix4 concepts
Limited to transform-related utilities
No built-in animation support
Best used alongside animation controllers for dynamic effects

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.