search

flutter / flutter-intellij

Flutter Plugin for IntelliJ
https://flutter.dev/using-ide
BSD 3-Clause "New" or "Revised" License
1.97k stars 316 forks source link

Embedding Layout Explorer to the Widget Inspector in IntelliJ #4511

Open InMatrix opened 4 years ago

InMatrix commented 4 years ago

We'd like to bring the Layout Explorer to the IntelliJ IDE by embedding it in the widget inspector for improved discoverability and workflow. This issue is created for public sharing and discussion of the desired UX. @raison00 has some mocks she can post here.

raison00 commented 4 years ago

Note: Some mocks of Layout Explorer are using version 0 visuals. Use current Layout Explorer design, Layout Explorer as shown here is FPO only. These are FPO renderings and are NOT screen captures. Provided for visual, contextual ideation. This 'ugly' version is intended as to not be confused with actual production tools.

All Examples are using the RenderOverflow Issue from the Flutter Error Studies as the app/issue to resolve

Launch & Position Flutter Inspector, Layout Explorer within IntelliJ IDE

Untitled-1

Launch Flutter Inspector and Layout Explorer in new window for best viewing experience. Here, you will see the options to launch the web version of DevTools with the Layout Explorer in a Browser or launch DevTools within IntelliJ IDE within its own panel, which can be opened to a custom size for maximum screen layout customization. Integrating DevTools within the IDE reduces friction and complications with utilizing its user code updates in the web and transferring to IDE.

open-layout-explorer

Launching Flutter Inspector maintains its same workflow, with Layout Explorer Integration. ide-select-le-positions-left

User can move Flutter Inspector and Layout Explorer in new position within IDE panel layout: ide-le-flutter-position-inspect-float-fpo

Integrating Layout Explorer within IntelliJ IDE

devtools-ide-integration

Connect to Layout Explorer within IntelliJ IDE

To connect to Layout Explorer within IntelliJ IDE, user connection protocols must be launched and validated devtools-ide-integration-v1

Using Flutter Inspector and Layout Explorer within IntelliJ IDE

Note: Some mocks of LE are using version 0 visuals. Use current Layout Explorer design, Layout Explorer as shown here is FPO only. These are FPO renderings and are NOT screen captures. Provided for visual, contextual ideation.

Default Right Split Flutter Widget Inspector with Layout Explorer Pane

container-error-layout-explorer-highlight ide-intellij-layout-explorer-container-error ide-intellij-le-row-error ide-intellij-details-text2-working ide-intellij-lex-flexible-working

ide-intellij-error-layout-explorer-text ide-intellij-error-le-details-text

Left Layout Split Flutter Widget Inspector with Layout Explorer Pane

le-flutter-inspect-lposition-left

Alt Layout Explorer Aspect Ratio

ide-layout-explorer--flutter-inspect-float-mobile-aspect-ratio

Validation

Note: Dashed-lines indicate marching ants selection.

green-code-fixed-check green-code-fixed container-fixed-layout-explorer-greener

Workflow

Using the RenderOverflow Error Sample App:

The IntelliJ IDE workflow with Layout Explorer High-Level use / integration high-level-workflow-flutter-inspector The IntelliJ IDE workflow with Layout Explorer would use a similar pattern as this workflow for user journey / integration. This does not show the optimized user journey specifically within IntelliJ. - to come: workflow-w-layout-ide-code

The IntelliJ IDE workflow with Layout Explorer would use a similar pattern as this workflow for user journey / integration. This does not show the optimized user journey specifically within IntelliJ. - to come: workflow-render-overflow-leg

Onboarding and Tooltips

intelliJ-LE-tip-of-day le-flutter-inspect-blank-tooltips

Lootwig commented 2 years ago

@InMatrix If this is working perfectly on MacOs, but not on Windows, even though I'm using the same IntelliJ version on both systems (2021.3), am I doing something wrong?