Outline view: Show properties in a properties pane

[mit-mit]

I personally find it cluttering that the nodes in the outline view show property values on the nodes them selves. Could we consider moving those to a property pane at the bottom?

[devoncarew]

/cc @scheglov

Another alternative is to only show high-value properties in-line, and to omit low-value properties altogether.

We also have a live preview area in the bottom ~30% of the view (currently behind a flag). In terms of conserving screen real estate, we could have a tab area at the bottom, with one tab being the live preview and the other being the widget properties.

[pq]

Another alternative is to only show high-value properties in-line, and to omit low-value properties altogether.

👍 @jacob314 and I have been discussing this for the inspector as well.

[scheglov]

@mit-mit Is there a specific example which makes you think that the tree if cluttered? Our current thinking is that:

1. We display properties in gray to deemphasize them.
2. We scroll tree to the left, so that you always see the most important information, and property values might be hidden.
3. But when you glance at the tree, you see all set properties, and values for many of them. So, you can get properties information about all widgets. If we move properties into a separate panel, users will lose ability to see them for all widgets, they will see properties only for the selected widget.

[jacob314]

If you do go with the property pane approach let me know. The existing property pane from the inspector could reasonably be reused as the JSON based data it needs is also be available from the flutter_tester instance you are using to get bounding boxes. See WidgetInspector.getProperties for a method that returns a JSON representation of the properties of a Widget or RenderObject.

[mit-mit]

Re specific example: sure, let's consider the default 'New Flutter Project' template app. My assumptions are that the Outline view as it's primary goal should enable the developer to:

• Very quickly understand the overall widget structure of an existing app

And that it in additional as secondary goals could:

• Understand the details of the individual widgets
• Understand the non-widget code structure
• Be a navigational aid
• Offer light editing

Right now I feel like we in an attempt to support the secondary goals, and up supporting the primary goal less well. I think the Outline view should be simple enough that a developer can glance it for less than a minute and then understand what the widget structure of a new app is, i.e.:

• One stateless widget building an app and a home page
• One stateful widget building a Scaffold with three main parts, and with the main part having a centered column containing two texts

I would speculate that any information shown that doesn't speak to that structure is "noise" and detracts from that goal. And then only additional thing I would add, is that I actually with you could see the difference between stateless and stateful widgets.