flutter icon indicating copy to clipboard operation
flutter copied to clipboard

Add WidgetPreview and WidgetPreviewerWindowConstraints widgets and @Preview() annotation

Open bkonyi opened this issue 1 year ago • 3 comments

This is the initial work for the upcoming Widget Preview functionality.

The WidgetPreview widget allows for users to specify overrides and details to apply to its child Widget. Initially, this includes:

  • Setting arbitrary width and height constraints to mimic changes in device resolution
  • Custom text scaling factors

The previewed widget is currently wrapped in a Material Card which includes controls for zooming and panning within the zoomed in view.

The WidgetPreviewerWindowConstraints widget propagates the constraints for the preview environment to each WidgetPreview widget to be used by the WidgetPreviewWrapper widget, a SingleChildRenderObjectWidget, to force constraints onto unconstrained children of WidgetPreview. This will eventually be used in a "preview scaffold" application generated by tooling to host the widget previews for display in the widget previewer environment.

bkonyi avatar Nov 20 '24 20:11 bkonyi

Is there a design doc for this new feature? I wonder if the framework should contain this source code, or if this is something that is intended for Devtools / Devtools extentions?

navaronbracke avatar Nov 21 '24 07:11 navaronbracke

Is there a design doc for this new feature? I wonder if the framework should contain this source code, or if this is something that is intended for Devtools / Devtools extentions?

There's currently not a publicly shared design doc, but I think I'm going to pull one together to better communicate how this feature is going to be architected.

This particular code should live in the framework since it's meant to be included in a developer's codebase. The other components of this feature will live in the flutter tool, DevTools, and the IDE plugins.

For example, this is an early prototype showing how a widget (in this case, the root of the Flutter Gallery application) can be previewed within VSCode by applying the @Preview() annotation to a function that returns instances of WidgetPreview:

image

bkonyi avatar Nov 21 '24 15:11 bkonyi

A design doc can be found here: https://github.com/flutter/flutter/issues/159342

bkonyi avatar Nov 22 '24 20:11 bkonyi

@bkonyi and I talked on Friday and we had the idea that what lives in the framework would ideally be fairly minimal. Maybe just the annotation and a WidgetPreview data class.

goderbauer avatar Dec 09 '24 18:12 goderbauer

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!).

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

flutter-dashboard[bot] avatar Dec 10 '24 15:12 flutter-dashboard[bot]

@bkonyi and I talked on Friday and we had the idea that what lives in the framework would ideally be fairly minimal. Maybe just the annotation and a WidgetPreview data class.

Done, PTAL when you have a chance!

bkonyi avatar Dec 10 '24 15:12 bkonyi

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

flutter-dashboard[bot] avatar Jan 01 '25 16:01 flutter-dashboard[bot]

autosubmit label was removed for flutter/flutter/159219, because - The status or check suite Linux analyze has failed. Please fix the issues identified (or deflake) before re-applying this label.

auto-submit[bot] avatar Jan 28 '25 17:01 auto-submit[bot]

autosubmit label was removed for flutter/flutter/159219, because - The status or check suite Linux analyze has failed. Please fix the issues identified (or deflake) before re-applying this label.

auto-submit[bot] avatar Jan 28 '25 18:01 auto-submit[bot]

autosubmit label was removed for flutter/flutter/159219, because - The status or check suite Linux_android_emu_34 android views has failed. Please fix the issues identified (or deflake) before re-applying this label.

auto-submit[bot] avatar Jan 29 '25 16:01 auto-submit[bot]