Add DeviceOrientationBuilder widget by MediaQuery orientation #177437
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes flutter#177435 On foldable devices, OrientationBuilder and MediaQuery.orientation can report different orientations. OrientationBuilder calculates orientation from layout constraints (width vs height), while MediaQuery reports the actual device orientation from the platform. This PR adds a new DeviceOrientationBuilder widget that uses MediaQuery.orientationOf() to determine orientation, ensuring consistency with MediaQueryData.orientation. This is particularly important for foldable devices where the screen dimensions may not match the device's physical orientation. Changes: - Add new device_orientation_builder.dart with DeviceOrientationBuilder widget - Export DeviceOrientationBuilder in widgets.dart - Add comprehensive tests in device_orientation_builder_test.dart - Keep existing orientation_builder.dart unchanged for backward compatibility The new widget provides an alternative for developers who need to respond to actual device orientation rather than layout-based orientation.
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
github-actions
bot
added
the
framework
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces the DeviceOrientationBuilder widget, which builds its child based on the physical device orientation from MediaQuery. This is a valuable addition, especially for foldable devices where layout dimensions might not match the device's orientation. The implementation is clean, and it's great to see comprehensive tests for both the new widget and the existing OrientationBuilder to clarify their distinct behaviors. I have one suggestion to improve the documentation for the new widget to make its dependency on MediaQuery more explicit, which will help prevent potential runtime errors.
packages/flutter/lib/src/widgets/device_orientation_builder.dart
Outdated
Show resolved
Hide resolved
victorsanni
reviewed
Oct 27, 2025
Contributor
victorsanni
left a comment
victorsanni
left a comment
There was a problem hiding this comment.
I don't think new files need to be created here? These changes can just be appended to widgets/orientation_builder.dartand its corresponding test file.
victorsanni
reviewed
Oct 27, 2025
packages/flutter/lib/src/widgets/device_orientation_builder.dart
Outdated
Show resolved
Hide resolved
Contributor
Author
|
Thanks a lot for the review and the thoughtful feedback 🙏 Even if it’s more of a side effect, OrientationBuilder reacts to layout constraints (width vs height), which fits responsive design use cases. On the other hand, DeviceOrientationBuilder uses MediaQuery.orientationOf() to reflect the actual device orientation, which is important on foldable devices or when the layout ratio no longer matches the device state. I wanted to keep these responsibilities clear — layout-driven vs. device-driven — rather than mix them in one widget. That said, if we want to make OrientationBuilder itself more semantically correct (or allow it to explicitly choose its orientation source), then I agree it could make sense to integrate this change directly there. If that’s the direction you’d prefer, I can update the PR right away. |
justinmc
approved these changes
Nov 5, 2025
Contributor
justinmc
left a comment
justinmc
left a comment
There was a problem hiding this comment.
LGTM with nits 👍
I think your argument for why this should be a separate widget makes sense to me.
Contributor
Author
|
@justinmc @victorsanni |
victorsanni
approved these changes
Nov 6, 2025
Contributor
victorsanni
left a comment
victorsanni
left a comment
There was a problem hiding this comment.
It would be nice to have an example that compares OrientationBuilder and DeviceOrientationBuilder. But I don't know how helpful one would be when presented on our web API docs.
Contributor
Author
|
Is additional documentation needed? Personally, I believe clearly documenting these differences in OrientationBuilder behavior should suffice. |
victorsanni
added
the
autosubmit
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 12, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
This was referenced Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 13, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 14, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 14, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 14, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 14, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 15, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 15, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 16, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 16, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 16, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 17, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 17, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 17, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 17, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 17, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 17, 2025
IvoneDjaja
pushed a commit
to IvoneDjaja/flutter
that referenced
this pull request
Nov 22, 2025
…r#177437) <!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> ## Issues Fixed Fixes flutter#177435 On foldable Android devices, `OrientationBuilder` and `MediaQuery.orientation` can report different orientations. `OrientationBuilder` calculates orientation from layout constraints (width vs height), while `MediaQuery` reports the actual device orientation from the platform. This PR adds a new `DeviceOrientationBuilder` widget that uses `MediaQuery.orientationOf()` to ensure consistency with the device's actual orientation. ## Breaking Changes No breaking changes. This PR does not modify any existing code in the flutter/tests repo or require a migration guide. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
mboetger
pushed a commit
to mboetger/flutter
that referenced
this pull request
Dec 2, 2025
…r#177437) <!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> ## Issues Fixed Fixes flutter#177435 On foldable Android devices, `OrientationBuilder` and `MediaQuery.orientation` can report different orientations. `OrientationBuilder` calculates orientation from layout constraints (width vs height), while `MediaQuery` reports the actual device orientation from the platform. This PR adds a new `DeviceOrientationBuilder` widget that uses `MediaQuery.orientationOf()` to ensure consistency with the device's actual orientation. ## Breaking Changes No breaking changes. This PR does not modify any existing code in the flutter/tests repo or require a migration guide. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
reidbaker
pushed a commit
to AbdeMohlbi/flutter
that referenced
this pull request
Dec 10, 2025
…r#177437) <!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> ## Issues Fixed Fixes flutter#177435 On foldable Android devices, `OrientationBuilder` and `MediaQuery.orientation` can report different orientations. `OrientationBuilder` calculates orientation from layout constraints (width vs height), while `MediaQuery` reports the actual device orientation from the platform. This PR adds a new `DeviceOrientationBuilder` widget that uses `MediaQuery.orientationOf()` to ensure consistency with the device's actual orientation. ## Breaking Changes No breaking changes. This PR does not modify any existing code in the flutter/tests repo or require a migration guide. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issues Fixed
Fixes #177435
On foldable Android devices,
OrientationBuilderandMediaQuery.orientationcan report different orientations.OrientationBuildercalculates orientation from layout constraints (width vs height),while
MediaQueryreports the actual device orientation from the platform. This PR adds a newDeviceOrientationBuilderwidget that usesMediaQuery.orientationOf()to ensure consistency with thedevice's actual orientation.
Breaking Changes
No breaking changes. This PR does not modify any existing code in the flutter/tests repo or require a migration guide.
Pre-launch Checklist
///).Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the
gemini-code-assistbot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.