flutter-control-and-screenshot

Flutter Driver 控制与截图

本技能介绍如何为 Flutter 应用添加 flutter_driver 支持、通过 Dart MCP 服务启动应用、控制应用（点击、查找组件）并截取屏幕截图（处理 Web／桌面端的特定限制）。

前提条件

1. Dart MCP 服务：确保 dart-mcp-server 正在运行。
2. Flutter 项目：需要一个可运行的 Flutter 项目。

步骤 1：添加依赖项

在 pubspec.yaml 的 dev_dependencies 中添加 flutter_driver。

dev_dependencies:
  flutter_driver:
    sdk: flutter

运行 dart pub get，或使用 mcp_dart-mcp-server_pub 工具。

步骤 2：创建 Driver 入口点

创建单独的入口点，通常为 test_driver/app.dart，以启用 driver 扩展，避免污染 main.dart。

重要

将 your_app_package_name 替换为 pubspec.yaml 中定义的实际软件包名称。

// test_driver/app.dart
import 'package:flutter_driver/driver_extension.dart';
import 'package:your_app_package_name/main.dart' as app; // Import your main app

void main() {
  // Enable the extension
  enableFlutterDriverExtension();

  // Run the app
  app.main();
}

步骤 3：通过 MCP 启动应用

使用 mcp_dart-mcp-server_launch_app 工具。

• target：test_driver/app.dart
• device：chrome（或 macos、linux、windows）
• root：项目根目录的绝对路径。

注意：该工具会返回一个 DTD URI（Data Tooling Daemon）和 PID。请保存这些信息。

步骤 4：连接到 DTD

使用 mcp_dart-mcp-server_connect_dart_tooling_daemon，并传入启动步骤返回的 URI。

{
  "uri": "ws://127.0.0.1:..."
}

步骤 5：Web 截图方案（浏览器子 Agent）

如果运行于 Web（Chrome），flutter_driver 的截图命令可能无法运行，或在某些环境中不受直接支持。稳妥的备用方案是使用 browser_subagent。

1. 获取应用 URL：使用应用的 PID 调用 mcp_dart-mcp-server_get_app_logs。查找类似 A Dart VM Service on Chrome is available at: http://127.0.0.1:XXXXX 的行。应用日志通常包含本地 HTTP URL。
2. 导航并快照：调用 browser_subagent。
   • 任务："导航到 [URL]。等待渲染完成。截取屏幕截图。"

步骤 6：控制应用（Flutter Driver）

使用 mcp_dart-mcp-server_flutter_driver 与应用交互。

• 获取组件树：mcp_dart-mcp-server_get_widget_tree（可用于查找键／标签）。
• 点击：

  {
    "command": "tap",
    "finderType": "ByText",
    "text": "Settings"
  }
  

• 还可以滚动、输入文本等。

步骤 7：清理

完成后务必停止应用，以释放端口和资源。

• 使用 PID 调用 mcp_dart-mcp-server_stop_app。

工作流示例

1. 启动 test_driver/app.dart。
2. 连接 DTD。
3. 检查日志：查找 localhost URL。
4. 浏览器子 Agent：导航并截图（主页／仪表板）。
5. Flutter Driver：点击“Tasks”标签页。
6. 浏览器子 Agent：截图（Tasks）。
7. Flutter Driver：点击“Settings”标签页。
8. 浏览器子 Agent：截图（Settings）。
9. 停止应用。