插件详情v4.0.1

matrix4_transform

一个辅助数学类，可轻松创建 Matrix4 变换，您可以在 Container 的 transform 参数及其他位置使用。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 7.3万
喜欢数: 185
Pub 分数: 150

安装插件

flutter pub add matrix4_transform

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个轻量级的 Dart 工具包，可简化在 Flutter 中创建 2D 和 3D 图形的 Matrix4 变换。它提供了直观的方法，用于通过 transform 参数为 Container 等小部件构建变换矩阵，从而精确控制旋转、缩放、平移和倾斜。非常适合动画、自定义布局以及需要高级变换的交互式 UI 元素。该包具有平台无关性，并可无缝集成到 Flutter 项目中。

适合场景

使用复杂变换动画化UI元素
创建自定义2D/3D布局
构建基于手势的交互式界面
实现相机或视图旋转
设计可扩展的游戏或可视化组件

主要特点

简单、可链式构建的矩阵
支持旋转、缩放、平移和倾斜
用于常见变换操作的直观 API
直接与 Container 的 transform 属性配合使用
轻量且无依赖

适合对象

需要精确矩阵控制的Flutter开发人员
正在开发动画或交互式布局的UI设计师
游戏或可视化应用创作者
初学者学习Flutter中的3D变换

使用建议

不适用于复杂的数学计算
需要理解 Matrix4 概念
仅限与变换相关的实用工具
无内置动画支持
最好与动画控制器配合使用，以实现动态效果

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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.