marcglasberg / matrix4_transform Goto Github PK

Flutter package: Helper math class for easily creating Matrix4 transformations, that you can use in Container's transform parameter and elsewhere.

License: Other

Java 2.21% Objective-C 4.58% Dart 93.21%

matrix4_transform's Introduction

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: ...
);

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.

The Flutter packages I've authored:

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

matrix4_transform's People

Contributors

Stargazers

Watchers

Forkers

latesr pita-with-hummus hugoheneault yesilcimenahmet flutterstudioist

matrix4_transform's Issues

problem with from contractor

Hi!
I want to transform a widget on onScaleUpdate event then I used Matrix4Transform like this:

GestureDetector(
  onScaleStart: (d) {
    dx = d.focalPoint.dx;
    dy = d.focalPoint.dy;
  },
  onScaleUpdate: (d) {
    setState(() {
      matrix = Matrix4Transform()
          .translate(x: d.focalPoint.dx - dx, y: d.focalPoint.dy - dy)
          .scale(d.scale)
          .rotate(d.rotation)
          .matrix4;
    });
  },
  child: Center(
    child: Transform(
      transform: matrix,
      alignment: FractionalOffset.center,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
  ),
)

It works fine, but the problem is, I want to keep last transform on Matrix4 object and use it on the next transform, then I've tried using from contractor like this:

onScaleUpdate: (d) {
    setState(() {
      matrix = Matrix4Transform.fom(matrix)
          .translate(x: d.focalPoint.dx - dx, y: d.focalPoint.dy - dy)
          .scale(d.scale)
          .rotate(d.rotation)
          .matrix4;
    });
  },

But it does not work how I expected, as you can see it's too sharp:
am I using it wrong? any suggestion?

Support null safety

The library 'package:matrix4_transform/matrix4_transform.dart' is legacy, and should not be imported into a null safe library.
Try migrating the imported library.

Error: This project cannot run with sound null safety, because one or more project dependencies do not
support null safety:

package:matrix4_transform

dependencies:
matrix4_transform: ^1.1.6

Perspective matrix transformation

Hello!

It would be really handy to have the ability to add perspective transformation to the Matrix4 using this package:

Migrate to extensions?

Any chance you'll migrate to extensions?

Matrix4TransformTween improvement

would it be possible to change Matrix4TransformTween in such a way it does not use broken Matrix4Tween.lerp method? now when matrix uses non trivial transformations the results are weird: "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."

Child gets distorted..

Hi
if I scale horizontally but keep the height constant, the child gets distorted. How to make the child resize automatically rather than scale with the parent?

🎃 Hacktoberfest

Hi there,

As every year in october, Hacktoberfest has started! :-)
More details here : https://hacktoberfest.digitalocean.com/resources/maintainers
Would you add the hacktoberfest label to your repo so contributors know they can participate and fix issues/craft PRs?

Thanks a lot.

Add an example with AnimatedContainer in ReadMe section.

Hi, dear Marc!

This package is a lifesaver, thank you! Normally, I needed to use an animation, a controller and all that boilerplate.

I was searching for a way to use the transform: property of the AnimatedContainer since it will save me from all that hustle. Found Matrix4Transform at the superb timing!

There isn't any issue actually but you can advertise this package by showing the animation power. And since it's chainable, I can create very complex animations.

AnimatedContainer(
  duration: animationDuration,
  curve: animationCurve,
  transform: Matrix4Transform()
    .translate(
       x: 0,
       y: !widget.isEditModeActive ? 0 : 40,
     ).matrix4,
  child: widget.child,
)

Skew support

It is currently hard and not intuitive to skew a widget with the out of box transformations. For instance I am having very hard time trying to transform a rectangle [] in to a lets say "railroad in perspective" /\ since it is easier with this package to use matrix4, I would be glad if skew is supported intuitively too:) thanks

Is there a Flutter Web support? (It shows yes)

I want to use this great package on my web application too. Yet there is an error like this

Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

`import 'package:matrix4_transform/matrix4_transform.dart';`

matrix4_transform: 1.1.3 I have it on pubspec.yaml like this. What could be the reason since on the pub page, WEB support is shown? https://pub.dev/packages/matrix4_transform

SOLVED: It's my bad. I've just forgotten to run flutter clean then rebuilding. For Flutter Web, I've experienced that before after adding new packages. Sometimes the cached build causes that.

It works as expected. Thanks again.