DevTools and the Flutter Widget Inspector Layout Explorer

DevTools UX Punch List 2020

Network
Timeline
Performance
Info
Debugger
Inspector
Logging
Memory

Flutter Layout Explorer: Using Flutter's Dart DevTools for Resolving the RenderFlex Overflow Errors

Note: This feature is only available in the alpha version of DevTools written in Flutter. Currently, the Layout Explorer only supports exploration of flex layouts.

• Flutter Layout Explorer: The Flutter Layout Explorer helps you to better understand Flutter layouts.
• Layouts in Flutter: Widgets are used for both layout and UI elements.
• flutter_error_studies repo: A repo for collecting case studies of Flutter error messages

Objective

• Flutter Layout & the RenderFlex overflow error: Provide visual tooling for troubleshooting common Flutter flex layout patterns.

Gists: Visualizing Common Layout Issues with Flutter Tools and Solutions

• Flutter RenderOverflow Errors using CustomMultiChild : Sample Overflow Challenge: Using CustomMultiChild Layout to Resolve RenderOverflow Errors
• Flutter RenderOverflow Solution using CustomMultiChild : Sample Overflow Solution: Using CustomMultiChild Layout to Resolve RenderOverflow Errors
• Flutter RenderOverflow Solution using Flexible Widget: Using Flexible Widget to solve render flex overflow errors
• Flutter RenderOverflow Solution using Expanded Widget: Using Expanded Widget to solve render flex overflow errors
• Flutter Box Constraints: Box Constraints Visualization; no text clipping issues/errors but can have a render overflow error in the column
• Flexible vs NonFlexible Widgets in CustomMultiChildLayout: CustomMultiChildLayout with flexible vs non-flexible widgets

Open

• Active: Layout Explorer --> Widget Inspector: Embedding Layout Explorer to the Widget Inspector in IntelliJ
• Active: Layout Explorer --> IntelliJ: Apply changes to user code from the layout explorer embedded in IntelliJ
• Active: Layout Explorer --> quick jump to overflow source: FR - LayoutExplorer - Add option to quick jump to overflowing widget
• Active: Will be closed soon: DevTools Debugger not available after launching Layout Explorer
• Active: Style Guidance for DevTools: UX guidance for specific aspects of UI/UX DevTools visual standards
• Active: Theme Inspector: Visualizing the widgets and elements
• Active: UX Punch List Item: Consistent Scroll Physics: UI changes from a UX review: consistent scroll physics
• Active: UX Punch List Item: Accessible Color: Green status color is too light in the light theme
• Active: Inspector text color has regressed: Changes made to Light Theme: Inspector text color has regressed

In Queue

• Design DevTools Landing Page: An informational / orientation landing page for DevTools. Having a page like this, perhaps served from /, would address a few workflow issues.
• Flutter Console Layout Issues: UX Messaging: Improve message for the RenderFlex Overflow error
• Flutter Layout Explorer Contextual UX: UX Workflow: Add option to quickly jump to overflowing widget
• Flutter Visual Search & Browse in IDE: Provide an in-IDE widget search and browsing experience that covers all Flutter stock widgets and a few popular community-generated widgets. Widget preview images and rich descriptions should be readily accessible in the IDE for the user to assess relevance to their tasks.
• Persist the memory profile timeline: UX Workflow: the memory profile timeline

Closed

• Alpha version access to Flutter Inspector Layout Explorer: How to access the Flutter Inspector Layout Explorer