Repository navigation
[ Widget Preview ] Improve zoom behavior and add zoom slider - #186422
Merged
Merged
Conversation
The current zoom behavior uses an `InteractiveViewer`, which zooms in on the previewed widget without actually increasing the size of the preview scaffolding. This makes it difficult to zoom in on details for smaller previews. This change updates the zoom behavior to scale the entire widget, forcing the preview scaffolding to increase in size. A slider has also been added with a zoom level indicator to make it easier to zoom in on a widget.
|
It looks like this pull request may not have tests. Please make sure to add tests or get an explicit test exemption before merging. If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix? Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. If you believe this PR qualifies for a test exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!). The test exemption team is a small volunteer group, so all reviewers should feel empowered to ask for tests, without delegating that responsibility entirely to the test exemption group. |
github-actions
Bot
added
the
tool
![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 replaces the InteractiveViewer with a custom ZoomablePreviewArea using a RenderShiftedBox and updates the ZoomControls to include a Slider and percentage display. Feedback indicates that the ZoomablePreviewArea requires vertical scrolling support and an override of applyPaintTransform for accurate coordinate mapping. The custom render object's intrinsic dimension calculations should be updated to incorporate the scale factor. Additionally, the ZoomControls should use theme-based colors instead of hardcoded values, and the percentage text container width should be increased to prevent layout issues.
Comment on lines
+123
to
+124
| activeColor: Colors.blue, | ||
| inactiveColor: Colors.grey, |
Contributor
There was a problem hiding this comment.
Hardcoding colors like Colors.blue and Colors.grey is discouraged. It is better to use colors from the current Theme to ensure consistency across different brightness modes and adherence to the application's color scheme.
activeColor: theme.colorScheme.primary,
inactiveColor: theme.colorScheme.onSurface.withOpacity(0.24),
The _ScaledLayoutRenderObject compute intrinsic methods did not account for the scale factor when querying the child, leading to incorrect layout when zoomed. This change updates the methods to scale the constraints passed to the child and scale the result. Addresses comment: https://github.com/flutter/flutter/pull/186422/changes#r3229850596
jyameo
previously approved these changes
May 15, 2026
jyameo
left a comment
jyameo
left a comment
Contributor
There was a problem hiding this comment.
overall LGTM! However there seems to be some failing tests
srawlins
approved these changes
May 15, 2026
|
|
||
| @override | ||
| double computeMinIntrinsicWidth(double height) { | ||
| if (child == null) { |
Contributor
There was a problem hiding this comment.
These could all use a local variable pattern which would use one less instance field retrieval and one less null-assert, but no biggie:
if (child case var child?) {
return child.getMinIntrinsicWidth(height / scale) * scale;
} else {
return 0.0;
}
flutter-dashboard
Bot
removed
the
autosubmit
This was referenced May 20, 2026
auto-submit Bot
pushed a commit
to flutter/packages
that referenced
this pull request
May 20, 2026
flutter/flutter@259aeae...e03b91f 2026-05-20 [email protected] Roll Packages from ade10ca to 1dfbada (6 revisions) (flutter/flutter#186811) 2026-05-20 [email protected] Fix AnimatedList.separated assert when removing last item mid-removal… (flutter/flutter#186389) 2026-05-20 [email protected] Roll Skia from d45969a5752e to 5f4f454b9662 (2 revisions) (flutter/flutter#186809) 2026-05-20 [email protected] Roll Fuchsia Linux SDK from -F9Ci3Opxt06MixDl... to iKCvaD58jKStYGla0... (flutter/flutter#186796) 2026-05-20 [email protected] Roll Skia from 19ad9707e5c6 to d45969a5752e (2 revisions) (flutter/flutter#186792) 2026-05-20 [email protected] Roll Skia from 3471ebf5af0c to 19ad9707e5c6 (9 revisions) (flutter/flutter#186772) 2026-05-20 [email protected] [web] Refactor webparagraph painters to separate CK properly (flutter/flutter#186684) 2026-05-19 [email protected] Enable Swift testing in the iOS embedder (flutter/flutter#185712) 2026-05-19 [email protected] [web] Rename WebParagraph goldens (flutter/flutter#186680) 2026-05-19 [email protected] Roll Skia from f1b406860c5e to 3471ebf5af0c (5 revisions) (flutter/flutter#186745) 2026-05-19 [email protected] Revert "Ship gen_snapshot for linux-arm64 hosts targeting Android" (flutter/flutter#186693) 2026-05-19 [email protected] [ Tool ] Remove legacy analytics code (flutter/flutter#184994) 2026-05-19 [email protected] Update Vulkan enum values (flutter/flutter#186694) 2026-05-19 [email protected] fix(web): Fixes CSS override detection when the browser has a default font size (flutter/flutter#186474) 2026-05-19 [email protected] adds linux impeller hello world integration test (flutter/flutter#186715) 2026-05-19 [email protected] Update the list of binaries in the code signing verification test to include new Dart snapshots (flutter/flutter#186754) 2026-05-19 [email protected] Make EdgeDraggingAutoScroller respect ScrollPhysics (flutter/flutter#186541) 2026-05-19 [email protected] [ Widget Preview ] Fix inspector split resize focus loss over WebViews (flutter/flutter#186432) 2026-05-19 [email protected] Roll Packages from b9bdd37 to ade10ca (1 revision) (flutter/flutter#186746) 2026-05-19 [email protected] Manual Dart roll from 8e30b88e4d5a to 66873d2da857 (flutter/flutter#186690) 2026-05-19 [email protected] [ Widget Preview ] Improve zoom behavior and add zoom slider (flutter/flutter#186422) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
creatorpiyush
pushed a commit
to creatorpiyush/packages
that referenced
this pull request
Jun 10, 2026
…r#11747) flutter/flutter@259aeae...e03b91f 2026-05-20 [email protected] Roll Packages from ade10ca to 1dfbada (6 revisions) (flutter/flutter#186811) 2026-05-20 [email protected] Fix AnimatedList.separated assert when removing last item mid-removal… (flutter/flutter#186389) 2026-05-20 [email protected] Roll Skia from d45969a5752e to 5f4f454b9662 (2 revisions) (flutter/flutter#186809) 2026-05-20 [email protected] Roll Fuchsia Linux SDK from -F9Ci3Opxt06MixDl... to iKCvaD58jKStYGla0... (flutter/flutter#186796) 2026-05-20 [email protected] Roll Skia from 19ad9707e5c6 to d45969a5752e (2 revisions) (flutter/flutter#186792) 2026-05-20 [email protected] Roll Skia from 3471ebf5af0c to 19ad9707e5c6 (9 revisions) (flutter/flutter#186772) 2026-05-20 [email protected] [web] Refactor webparagraph painters to separate CK properly (flutter/flutter#186684) 2026-05-19 [email protected] Enable Swift testing in the iOS embedder (flutter/flutter#185712) 2026-05-19 [email protected] [web] Rename WebParagraph goldens (flutter/flutter#186680) 2026-05-19 [email protected] Roll Skia from f1b406860c5e to 3471ebf5af0c (5 revisions) (flutter/flutter#186745) 2026-05-19 [email protected] Revert "Ship gen_snapshot for linux-arm64 hosts targeting Android" (flutter/flutter#186693) 2026-05-19 [email protected] [ Tool ] Remove legacy analytics code (flutter/flutter#184994) 2026-05-19 [email protected] Update Vulkan enum values (flutter/flutter#186694) 2026-05-19 [email protected] fix(web): Fixes CSS override detection when the browser has a default font size (flutter/flutter#186474) 2026-05-19 [email protected] adds linux impeller hello world integration test (flutter/flutter#186715) 2026-05-19 [email protected] Update the list of binaries in the code signing verification test to include new Dart snapshots (flutter/flutter#186754) 2026-05-19 [email protected] Make EdgeDraggingAutoScroller respect ScrollPhysics (flutter/flutter#186541) 2026-05-19 [email protected] [ Widget Preview ] Fix inspector split resize focus loss over WebViews (flutter/flutter#186432) 2026-05-19 [email protected] Roll Packages from b9bdd37 to ade10ca (1 revision) (flutter/flutter#186746) 2026-05-19 [email protected] Manual Dart roll from 8e30b88e4d5a to 66873d2da857 (flutter/flutter#186690) 2026-05-19 [email protected] [ Widget Preview ] Improve zoom behavior and add zoom slider (flutter/flutter#186422) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
via-guy
pushed a commit
to via-guy/flutter
that referenced
this pull request
Jun 26, 2026
…#186422) The current zoom behavior uses an `InteractiveViewer`, which zooms in on the previewed widget without actually increasing the size of the preview scaffolding. This makes it difficult to zoom in on details for smaller previews. This change updates the zoom behavior to scale the entire widget, forcing the preview scaffolding to increase in size. A slider has also been added with a zoom level indicator to make it easier to zoom in on a widget.
11 tasks done
pull Bot
pushed a commit
to Mu-L/flutter
that referenced
this pull request
Sep 12, 2026
Fixes flutter#191628 Fixes flutter#187204 Bumps Dart across the repo to 3.13 and reformats the repo The CI formatting check is also re-enabled with this change. #### Deviating pubspec.yaml Packages The following packages deviate from the standard repository Dart SDK constraint (^3.11.0-0 before the bump). Some of these cannot cleanly downgrade. Changing them is considered out of scope. Some of them may also pertain to active work that requires later versions of Dart. 1. ios_universal_link - Full File Path: dev/integration_tests/ios_universal_link/pubspec.yaml - Dart SDK Version: ^3.14.0-53.0.dev - Author: @okorohelijah - Commit: 2a071e2 (2026-09-04) - PR / Message: Add iOS Universal Link integration test (Simulator) (flutter#191443) 2. flutter_analyzer_plugin - Full File Path: dev/flutter_analyzer_plugin/pubspec.yaml - Dart SDK Version: ^3.7.0 - Author: @bkonyi - Commit: ae9963e (2026-08-12) - PR / Message: [analysis] Reland "Added initial implementation of the flutter_analyzer_plugin (flutter#175679)" (flutter#191022) 3. widget_preview_scaffold - Full File Path: dev/integration_tests/widget_preview_scaffold/pubspec.yaml - Dart SDK Version: ^3.12.0 - Author: @polina-c - Commit: 3ca99c3 (2026-05-15) - PR / Message: [ Widget Preview ] Improve zoom behavior and add zoom slider (flutter#186422) 4. hybrid_platform_views - Full File Path: dev/integration_tests/hybrid_android_views/pubspec.yaml - Dart SDK Version: ^3.7.0-0 - Author: @andrewkolos - Commit: 112f170 (2026-03-09) - PR / Message: Reland hybrid views test (flutter#181336) 5. record_use_test_app - Full File Path: dev/integration_tests/record_use_test_app/pubspec.yaml - Dart SDK Version: >=3.5.0-0 <4.0.0 - Author: @dcharkes - Commit: eb6acab (2026-04-09) - PR / Message: [record_use] Add experimental flag and test project (flutter#184719) 6. record_use_test_package - Full File Path: dev/integration_tests/record_use_test_package/pubspec.yaml - Dart SDK Version: >=3.5.0-0 <4.0.0 - Author: @dcharkes - Commit: eb6acab (2026-04-09) - PR / Message: [record_use] Add experimental flag and test project (flutter#184719) 7. data_asset_app - Full File Path: dev/integration_tests/data_asset_app/pubspec.yaml - Dart SDK Version: >=3.5.0-0 <4.0.0 - Author: @dcharkes - Commit: a0924c7 (2026-04-07) - PR / Message: Reland "[data_assets] Cleanup tests" (flutter#184714) 8. data_asset_package - Full File Path: dev/integration_tests/data_asset_package/pubspec.yaml - Dart SDK Version: >=3.5.0-0 <4.0.0 - Author: @dcharkes - Commit: a0924c7 (2026-04-07) - PR / Message: Reland "[data_assets] Cleanup tests" (flutter#184714) ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools. - [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 in-code documentation (doc comments with `///`). - [x] If this PR introduces a new feature or capability, I created and linked a website documentation issue or PR in [flutter/website] (or verified none is needed). - [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. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. If this change needs to override an active code freeze, provide a comment explaining why. The code freeze workflow can be overridden by code reviewers. See pinned issues for any active code freezes with guidance. **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 [AI contribution guidelines]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#ai-contribution-guidelines [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 [flutter/website]: https://github.com/flutter/website [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
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
The current zoom behavior uses an
InteractiveViewer, which zooms in on the previewed widget without actually increasing the size of the preview scaffolding. This makes it difficult to zoom in on details for smaller previews.This change updates the zoom behavior to scale the entire widget, forcing the preview scaffolding to increase in size. A slider has also been added with a zoom level indicator to make it easier to zoom in on a widget.