Position Resize and Rotate Flutter Widget dynamically with gesture

Question

I am developing an image editor in flutter. For that, I need to add a feature of adding images and text dynamically to the screen. Each of them should be able to independently scale, position, and rotate. There should be an anchor point like in word or in photoshop to indicate the active image and to scale and rotate them(sample in the image). The image should be positioned with drag and drop.

The widget should be able to scale in x, in y, and in both xy.

Things I have tried

1.matrix_gesture_detector I think this package doesn't have the option to scale only in x or only in y. It uniformly scales the widget in x and y. Also making the active image with something like in the image is difficult. If we wrap the active image in a custom widget like in the image, the widget also scales with the image. For eg if the border thickness is 1 px when scaled the thickness also scales making it wired.

2. Using Transform Widget. When the transform widget is used the above-mentioned problem of the widget indication the active image around the image also scales with the widget. Also in transform when scaling I have to adjust the alignment or the origin dynamically with respect to the scaling chosen. For eg, if I want to scale in the top direction only, I have to set the anchor point to the bottomCenter.But here the anchor points are set with respect to the initial size of the widget. So when changing the anchor point to scale in a different direction, the widget jumps to a corresponding alignment position with respect to the original size of the widget.

3. Using Positioned.fromRect I have tried this solution from StackOverflow Resizing a rotated container in flutter, but here the problem is the solution is only for one widget. So I wrapped that in a stack. But when rotated, it rotates the full stack. The stack takes the height and width of the canvas. So the alignment of the anchor point of the transform widget is with respect to that and not with respect to the image.

NB: I am using Getx for state managemanet. If you can provide the solution in getx, that is preferred.

Answer 1

You can warp a Stack->Positioned->Transform.rotate->Your Widget. Also refer the source code of photobooth.