Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve support for rotation in responsive layouts #93

Open
gskinner opened this issue Dec 21, 2020 · 0 comments
Open

Improve support for rotation in responsive layouts #93

gskinner opened this issue Dec 21, 2020 · 0 comments
Labels
bug Something isn't working flutter xd Dependency on an XD fix / feature

Comments

@gskinner
Copy link
Collaborator

gskinner commented Dec 21, 2020

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:
image

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

image

@gskinner gskinner added bug Something isn't working xd Dependency on an XD fix / feature flutter labels Dec 21, 2020
@gskinner gskinner changed the title Improve support for rotation & responsive layout Improve support for rotation in responsive layouts Dec 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working flutter xd Dependency on an XD fix / feature
Projects
None yet
Development

No branches or pull requests

1 participant