You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, rotation does not work reliably with responsive layouts. With a couple tweaks, we may be able to solve this issue for elements rotated by 90deg increments, and improve it for other cases.
The first issue is that Flutter ignores Transform with respect to dynamic layout. We could improve the common case for 90 degree rotations by detecting it and using a RotatedBox instead.
The second issue is that XD appears to return width and height values based on the non-rotated element (ex. a 10x100 box rotated 90deg will still return 10x100 even though it is actually 100x10 on screen). We could potentially work around this by calculating the on screen dimensions (ie. multiplying against the rotation matrix). This would require significant testing, to ensure different element types are handled consistently, and to determine how it intersects with position and scale.
This is further complicated by the fact that XD also seems to handle this case incorrectly when the elements are component instances:
The above image shows XD on the left and Flutter on the right. Flutter shows the issues with rotation occurring outside of layout (ie. the top and bottom edges are stretched vertically instead of horizontally). XD simply doesn't stretch the rotated edges, which is unexpected.
Behaviour is different in XD with different element types. The image below shows the corners as groups (containing two shapes), and the edges / center as rectangles. XD displays correctly. Flutter shows the same issue as above (note the bl & tr corners show issues due to the comprising shapes being rotated).
The text was updated successfully, but these errors were encountered:
Currently, rotation does not work reliably with responsive layouts. With a couple tweaks, we may be able to solve this issue for elements rotated by 90deg increments, and improve it for other cases.
The first issue is that Flutter ignores
Transform
with respect to dynamic layout. We could improve the common case for 90 degree rotations by detecting it and using aRotatedBox
instead.The second issue is that XD appears to return width and height values based on the non-rotated element (ex. a 10x100 box rotated 90deg will still return 10x100 even though it is actually 100x10 on screen). We could potentially work around this by calculating the on screen dimensions (ie. multiplying against the rotation matrix). This would require significant testing, to ensure different element types are handled consistently, and to determine how it intersects with position and scale.
This is further complicated by the fact that XD also seems to handle this case incorrectly when the elements are component instances:
The above image shows XD on the left and Flutter on the right. Flutter shows the issues with rotation occurring outside of layout (ie. the top and bottom edges are stretched vertically instead of horizontally). XD simply doesn't stretch the rotated edges, which is unexpected.
Behaviour is different in XD with different element types. The image below shows the corners as groups (containing two shapes), and the edges / center as rectangles. XD displays correctly. Flutter shows the same issue as above (note the bl & tr corners show issues due to the comprising shapes being rotated).
The text was updated successfully, but these errors were encountered: