Inspector widget tree design improvements proposal

[CodemateTechAgency]

Hello again! This is our proposal for our second goal: making it easier to find widgets around the Flutter Inspector.

Background

The widget tree is currently a fairly plain list of widgets within an application, with little visual help for developers to find which part of the widget tree matches which part of their app.

This is how it currently looks:

Our aim is to tweak the design to assist users with identifying widgets in the tree more easily, including when scanning through the tree to find a widget, and to better orient themselves when looking at a portion of the tree.

Design tweaks

We have two design proposals for helping make widgets easier to identify: just changing colors and icon shapes, or adding icons to various common widgets.

We’d appreciate your feedback as to whether you think the icon version is the way to go; or if it's too visually confusing.

Proposed design version 1: just adding icon color coding

This version just categories icons based on color and icon shape, keeping the current initial letter from the current widget design:

Proposed design version 2: adding icons

This version adds custom icons to various widgets. Our concern with adding many different icons is that the tree becomes somewhat cluttered and visually confusing. We feel that highlighting container widgets such as containers, columns, rows and alignment is most useful for helping users orient themselves:

Color coding

These are our current categories of color coding for both options:

• Grey for high-level widgets (Root, MaterialApp, etc)
• Green to highlight basic widgets (Icons, Text, Images)
• Orange for animations, transitions and transforms (to highlight widgets that are moving/rotated etc)
• Blue for all other widgets (a brighter color to help improve contrast)

Icon alignment

We also suggest tweaking the alignments of the tree so that icons are directly aligned with the expand/collapse arrows, see this before and after:

Layout explorer

We will also bring the same color coding applied to the widget tree to the Layout Explorer. This will allow users to better understand the correlation between widgets in the two views.

Current coloring

New coloring

Content previews

We feel that surfacing some content from within a user’s app would greatly assist in users orienting themselves within the widget tree.

Our main suggestion here is showing content from text widgets, like this:

Our own Flutter developers found this the most useful change for working out where they are within the widget tree.

We would like to do something similar to showing the text, but with icon content, such as this car icon:

However we believe showing icons to be a considerable technical challenge, probably requiring transferring the binary image data between the app and DevTools. We’ve briefly looked into this, but showing icons probably can’t be done within this project timescale.

Thanks,
Tom, Olli and Alex from Codemate

cc @InMatrix @csells @jacob314 @kenzieschmoll

[kenzieschmoll]

I like proposal 2 and everything below it. All look like great ways to make this data easier to parse for the user!

[jacob314]

Proposal #2 SGTM. We previously had icons but were not satisfied with their quality. The icons shown in your example look better and more aligned with the rest of DevTools. The challenge is there are 300+ widgets just in the core Flutter package. There was a json file with Widget categories but it is fairly out of date at this point.

I can drive implementing fetching the icons from the running app so please don't spend time on that part.

[InMatrix]

I too like Proposal #2. The icons in the overview tree don't look too noisy to me, though we could consider increase the size of the icon a bit. Here are some more specific feedback:

The icon for the Text widget seems to suggest the Text is resizable (e.g., using the four corner handles). Can we revisit the design of this icon?

To categorize widgets for color coding, I suggest we have the following categories:

• Content (Text, Images, Icons)
• Layout (Column, Row, Stack, Align, Center, etc)
• Animation
• User Input (Button, TextField, Checkbox, GuestureDetector, etc)
• Styling (Padding, DecoratedBox, Theme, etc)
• Everything else

What do you all think? We can start with what's in the widget catalog but feel free to make adjustments, since it's a little out of date. I think the category information is actually annotated in the Flutter source code. @jacob314 Do you know how we can make sure we don't create a second taxonomy here?

Content previews look great. For Text, we might want experiment with hiding "Text" when the preview is provided.

Finally, have you considered accessibility (e.g., contrast ratio, etc) in this proposal?

Thanks!

[tomgilder]

Thank you for the feedback! We're currently revising icons, will post updated full designs soon.

The icon for the Text widget seems to suggest the Text is resizable (e.g., using the four corner handles). Can we revisit the design of this icon?

Yes, agreed, we'll change this.

I think the category information is actually annotated in the Flutter source code

Do you know where this is? The only thing I'm aware of is the widgets.json that the DevTools used to use. Would be great if we could categorise them directly from the Flutter source.

Content previews look great. For Text, we might want experiment with hiding "Text" when the preview is provided.

Personally I feel keeping "Text" is valuable; there might be more than one text-based widget that we want to show the text of, plus a user might still be scanning for the widget name.

Finally, have you considered accessibility (e.g., contrast ratio, etc) in this proposal?

Yes, we'll do a full contrast ratio check on the final designs and tweak if necessary. I can't think of any other accessibility issues other than color here.

[InMatrix]

@tomgilder I just learned that we have a few colleagues working on a new color palette for Flutter's website. It would be important to use the same brand colors whenever it makes sense. I'm looking to get more information to you about that. It's Okay to use a provisional color scheme, but please expect requests to change that in the PR.

Regarding to a few things you brought up in your last comment:

I think the category information is actually annotated in the Flutter source code

Sorry, I have to take that back. Annotating widget classes with category data is supported by dartdoc (dart-lang/dartdoc#1610), but the actual annotations haven't been added to the Flutter framework (flutter/flutter#10344). So widgets.json is still the best source of widget categorization. Feel free to propose updates to that json file as well.

Personally I feel keeping "Text" is valuable; there might be more than one text-based widget that we want to show the text of, plus a user might still be scanning for the widget name.

Sure, I didn't feel strongly either way. This makes sense.

[olli-lauhaa]

We have gathered some icons that would be a good starting point. Few of them could be used on multiple occasions (like animation and transition icons would be used in most of those widgets). Of course we can always expand the catalogue along the way, when a good icon for a widget is discovered.

We’ll prep the icons assets so that they appear optically similar sized.

We didn’t introduce new colors at this point. For starters, the widget tree seemed to get a bit messy with my tests with additional colors, but also, let’s wait for the new color scheme first. Maybe we can get a good palette from there.

So far we grouped the content + input widgets, styling + layout widgets and animation & transition widgets with the same color.

Any thoughts, are some important icons missing at this point?

[kenzieschmoll]

small nit: looks like checkbox and radio button are switched. Otherwise, looks good!

[jacob314]

The icons look nice in general except for the reversed checkbox and radio button.

A couple other fairly important categories of widgets:
Scaffolding widgets:
MaterialApp, WidgetApp, CupertinoApp.

Widgets that don't have a visual impact but bind data to the app. For example:
https://api.flutter.dev/flutter/widgets/ValueListenableBuilder-class.html

There are a number of Text like widgets. For example: RichText, Text, and SelectableText, DefaultTextStyle (shouldn't display like other text widgets).

@pq do you have some statistics on the most frequently used widgets in Flutter code? That could help prioritize which widgets to add thoughtful icons for.

[pq]

@pq do you have some statistics on the most frequently used widgets in Flutter code?

I don't have anything fresh. @InMatrix may have some thoughts/data?

[InMatrix]

We analyzed ~400 open-source Flutter app projects on itsallwidgets.com about a year ago, and the list below are the top 50 widgets based on the proportion of projects using them:

- MaterialApp - Scaffold - Column - Container - Icon - Row - Center - Padding - ListView - AppBar - SizedBox - Expanded - Image - IconButton - Stack - GestureDetector - FlatButton - ListTile - CircularProgressIndicator - SingleChildScrollView - InkWell - Card - Align - FloatingActionButton - TextField - Divider - RaisedButton - AlertDialog - SafeArea - Positioned - Material - CircleAvatar - SnackBar - ClipRRect - Flexible - FutureBuilder - Drawer - Opacity - RichText - TabBar - TabBarView - Wrap - Transform - Hero - PageView - GridView - TextFormField - Tab - StreamBuilder

@olli-lauhaa The overall style and legibility of the icons look good to me. I did notice that the icons for SizedBox, ConstrainedBox, and Expanded + Flex are the same. It would be great if we can distinguish them in some way. The widget catalog has some old illustrations for layout widgets (https://flutter.dev/docs/development/ui/widgets/layout) which might be useful as references.

[CM-Olli]

Here's a couple of additional icons for that top-50 list:

Didn’t try out different icons for text widgets, but initial feeling on that is that those might not be useful. Main factors of finding the right text widget are probably the widget name, color and preview text, so in this case, adding different icons to each might bring unnecessary visual clutter to the widget tree.

This applies to other “widget groups” as well. Ie. using the same tab icon for all tab-related icons (unless something especially needs to be differentiated).

[CM-Olli]

Here are the few additional icons:

[kenzieschmoll]

closing as complete.