套件詳情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.