A Practical Debugging Workflow

This guide demonstrates how to use the Flutter MCP Toolkit to debug a common issue: a UI that doesn't look right.

The Scenario

Imagine you have a button that is supposed to be centered on the screen, but it's appearing in the top-left corner.

The Workflow

1. Capture Unified Evidence: First, ask your AI assistant to run capture_ui_snapshot to collect screenshots, view details, and app errors together.

   "Capture a UI snapshot bundle."

2. Inspect Problem Coordinates: Use inspect_widget_at_point for the suspicious screen position to map what widget/render object is actually there.

   "Inspect widget at x=120 y=220."

3. Identify the Problem: By examining widget-tree output and route/source hints, you might discover that the button is not wrapped in a Center widget.

4. Fix the Code: Now, you can ask the AI to fix the code by wrapping the button in a Center widget.

   "Wrap the button in a Center widget."

5. Hot Reload and Verify: Finally, hot reload the app and take another screenshot to verify that the button is now centered.

   "Hot reload the app and take another screenshot."

This workflow demonstrates how the Flutter MCP Toolkit can be used to quickly and efficiently debug UI issues with visual evidence and source mapping.