| íëĒŠ | ë´ėŠ |
|---|---|
| Category | petmedi-development |
| Complexity | simple |
| MCP Servers | flutter-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