I'm working on a Story feature that is similar to Instagram. One part will be draggable widgets (think text, gifs, or images).
I am allowing the user to rotate & scale these widgets.
I'm trying to get the widgets to display the same, or as closely as possible, on various screen sizes.
I have tried using both position.dy & position.dy values as well as using the left & top coordinates.
When viewing my widget I have tried something like this:
return Positioned(
left: left,
top: top,
child: Transform.rotate(
angle: rotation,
child: Transform.scale(
scale: scale,
child: Container(
width: width,
height: height,
child: // Custom Widget
),
),
),
);
Where left, top, rotation, scale, width, and height are all saved when I create my widget & drag it to the desired location + any rotation or scale.
This seems to work ok, but there are many times that the item may be partially off-screen or just not close enough to match up -- main use case(s) is if the story was created on an iPhone 14 Pro & viewed on an iPhone SE or vice versa.
Any suggestions are appreciated!