LogoSkills

inspector/ui

Widget tree runtime inspection and analysis

항ëĒŠë‚´ėšŠ
Categorypetmedi-development
Complexitysimple
MCP Serversflutter-inspector

/inspector/ui#

Context Framework Note: Activated when debugging UI layout issues.

Triggers#

  • Layout overflow
  • Widget tree analysis
  • UI structure check

MCP Tools#

ui_get_widget_tree#

Returns the widget tree of the current screen.

Parameters:

  • depth: Tree depth (default 5)
  • includeRenderObjects: Include RenderObject info

Response example:

{
   " tree " : {
     " type " :  " MaterialApp " ,
     " children " : [
      {
         " type " :  " Scaffold " ,
         " children " : [
          { " type " :  " AppBar " ,  " properties " : { " title " :  " Home " } } ,
          { " type " :  " ListView " ,  " children " : [...]}
        ]
      }
    ]
  }
}

ui_find_widgets#

Searches for widgets by specific type.

Parameters:

  • type: Widget type name (e.g., Text, Container)
  • key: Widget Key value

ui_get_screen_info#

Returns current screen information.

ui_find_overflow#

Finds widgets with overflow issues.

ui_get_text_widgets#

Returns all text widgets and their content.

Common Diagnostics#

Layout overflow#

1. ui_find_overflow - >   Identify problem widget
2. Check the widget path
3. Compare constraints vs size
4. Suggest applying Expanded, Flexible, SingleChildScrollView

Widget not found#

1. ui_find_widgets type= " TargetWidget " 
 2. Verify widget existence
3. Trace widget tree path
4. Review conditional rendering logic

UI performance issues#

1. ui_get_widget_tree - >   Check depth
2. Identify unnecessarily deep nesting
3. Check const widget usage
4. Analyze rebuild frequency with /inspector/bloc

Responsive layout#

1. ui_get_screen_info - >   Check screen size
2. Run ui_find_overflow at various sizes
3. Review MediaQuery-based conditions

Examples#

Check widget tree#

/inspector/ui tree

Overflow inspection#

/inspector/ui overflow

Check screen info#

/inspector/ui screen

Find text widgets#

/inspector/ui texts

References#

  • Detailed implementation: .claude/agents/flutter-inspector-ui.md
  • Master inspector: .claude/commands/inspector.md
  • BLoC inspector: .claude/commands/inspector/bloc.md