Landscape Device Orientation Size Issues

[djcnnrs]

Can we access your project?

• [x] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When building for a mobile device in landscape orientation, container sizes and expansions don't behave as expected. If you use the dropdown at the top of the screen to change the orientation view to landscape, you'll notice the Size (px) doesn't change; i.e. The width and height stay the same as portrait, instead of switching. (This is the same for Tablet sizes too.)

When testing the app, the values shown at the top of the screen are different, so it seems that container sizes based on percentages are calculated on different values. This makes testing view and development view different from each other, and therefore hard to develop properly.

Notice below in development mode the size in landscape is 412 x 892, but in test mode, the size is 892 x 412. Because of this, my circular container sized at 40% is clearly different in each view.

• A workaround is to keep the device orientation in portrait, but manually change the Size (px) values to match the landscape layout; However, this easily gets reset often. This does make the development view match the test view though.

Notice below in development mode with workaround, both sizes are shown as 892 x 412, and the dev mode and test mode shown above now look (and behave) the same as they should.

Expected Behavior

The device width and height should update accordingly when using the dropdown to select a Landscape Device Orientation, so that widgets display in the dev environment as they will in the test environment.

Steps to Reproduce

1. Create new page.
2. Use the dropdown to change Device Orientation to Landscape.
3. Add a Round Container with Diameter at 50%. (Notice it's size.)
4. Run the app in Test Mode.
5. Use the dropdown in Test Mode to change Device Orientation to Landscape.
6. Notice how the size of the round container changes, and doesn't match dev mode.

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4Ok8/lx5BPm9hE18/2b8BvmjkXQ0w2U5ZNm8JDRQojferNG7UIec/4VEptXbC+TVc3IGKJsGYdpujLkdzIN/YqAy+aftlPyMx+Uw6XQnKnbramPqjhZmpfEtpKBWLG0J6z2ghSIrNpcVoC2mb7JeSsSijcQaLRClgvPuaZDILXnXfuQ0SLb3kNh1JWeC/v

Visual documentation

Visual documentation included above.

Environment

- FlutterFlow version: 4.1.79+
- Platform: Windows Desktop
- Browser name and version: Brave v1.68.131 Chromium: 127.0.6533.73 (Official Build) (64-bit)
- Operating system and version affected: Windows 11 Pro 23H2

Additional Information

How has this issue affected you?

• The development environment should match the test/device environment so I can accurately layout components and properly setup behaviors of components/widgets.

[msusviela]

Thanks! I was able to replicate the issue. i'll send it to ENG so they can check on that

[djcnnrs]

This also seems to be affecting Screenshot Mode since the widths and heights are calculated using the opposite values.