flutter-control-and-screenshot

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flutter Driver Control & Screenshot

Flutter Driver 控制与截图

This skill outlines the process of adding

flutter_driver

support to a Flutter application, launching it via the Dart MCP server, controlling it (tapping, finding widgets), and capturing screenshots (handling Web/Desktop specific constraints).

本技能介绍了为Flutter应用添加

flutter_driver

支持、通过Dart MCP服务器启动应用、控制应用（点击、查找组件）以及捕获截图（处理Web/桌面端特定限制）的流程。

Prerequisites

前提条件

Dart MCP Server: Ensure the
```
dart-mcp-server
```
is active.
Flutter Project: You need a working Flutter project.

Dart MCP服务器：确保
```
dart-mcp-server
```
处于运行状态。
Flutter项目：你需要一个可正常运行的Flutter项目。

Step 1: Add Dependency

步骤1：添加依赖

Add

flutter_driver

to the

dev_dependencies

in your

pubspec.yaml

yaml

dev_dependencies:
  flutter_driver:
    sdk: flutter

Run

dart pub get

or use the

mcp_dart-mcp-server_pub

tool.

在

pubspec.yaml

的

dev_dependencies

中添加

flutter_driver

。

yaml

dev_dependencies:
  flutter_driver:
    sdk: flutter

运行

dart pub get

或使用

mcp_dart-mcp-server_pub

工具。

Step 2: Create Driver Entry Point

步骤2：创建驱动入口文件

Create a separate entry point, typically

test_driver/app.dart

, to enable the driver extension without polluting

main.dart

[!IMPORTANT] Replace
your_app_package_name
with the actual name of your package as defined in
pubspec.yaml
.

dart

// 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();
}

创建一个独立的入口文件，通常为

test_driver/app.dart

，以在不污染

main.dart

的情况下启用驱动扩展。

[!IMPORTANT] 将
your_app_package_name
替换为
pubspec.yaml
中定义的实际包名。

dart

// test_driver/app.dart
import 'package:flutter_driver/driver_extension.dart';
import 'package:your_app_package_name/main.dart' as app; // 导入你的主应用

void main() {
  // 启用扩展
  enableFlutterDriverExtension();

  // 运行应用
  app.main();
}

Step 3: Launch App via MCP

步骤3：通过MCP启动应用

Use the

mcp_dart-mcp-server_launch_app

tool.

```
target
```
:
```
test_driver/app.dart
```
```
device
```
:
```
chrome
```
(or
```
macos
```
,
```
linux
```
,
```
windows
```
)
```
root
```
: Absolute path to your project root.

Note: The tool returns a DTD URI (Data Tooling Daemon) and a PID. Save these.

使用

mcp_dart-mcp-server_launch_app

工具。

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

注意: 该工具会返回一个DTD URI（数据工具守护进程）和PID，请保存这些信息。

Step 4: Connect to DTD

步骤4：连接到DTD

Use

mcp_dart-mcp-server_connect_dart_tooling_daemon

with the URI returned from the launch step.

json

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

使用

mcp_dart-mcp-server_connect_dart_tooling_daemon

工具，并传入启动步骤返回的URI。

json

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

Step 5: Web Screenshot Strategy (Browser Subagent)

步骤5：Web端截图策略（浏览器子代理）

If running on Web (Chrome),

flutter_driver

's screenshot command may not work or may not be supported directly in all environments. A robust fallback is to use the

browser_subagent

Get App URL: Use
```
mcp_dart-mcp-server_get_app_logs
```
with the app's PID. Look for lines like
```
A Dart VM Service on Chrome is available at: http://127.0.0.1:XXXXX
```
. The app logs usually contain the local HTTP URL.
Navigate & Snapshot: Call
```
browser_subagent
```
.
- Task: "Navigate to [URL]. Wait for render. Take a screenshot."

如果在**Web (Chrome)**上运行，

flutter_driver

的截图命令可能无法工作，或在部分环境中不被直接支持。一个可靠的替代方案是使用

browser_subagent

。

获取应用URL: 使用
```
mcp_dart-mcp-server_get_app_logs
```
工具并传入应用的PID。查找类似
```
A Dart VM Service on Chrome is available at: http://127.0.0.1:XXXXX
```
的行，应用日志中通常包含本地HTTP URL。
导航并截图: 调用
```
browser_subagent
```
。
- 任务: "导航至[URL]，等待渲染完成，然后截取截图。"

Step 6: Control the App (Flutter Driver)

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

Use

mcp_dart-mcp-server_flutter_driver

to interact with the app.

Get Widget Tree:
```
mcp_dart-mcp-server_get_widget_tree
```
(useful to find keys/labels).

Tap:

json

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

Scroll, Enter Text, etc. are also available.

使用

mcp_dart-mcp-server_flutter_driver

工具与应用交互。

获取组件树:
```
mcp_dart-mcp-server_get_widget_tree
```
（有助于查找键/标签）。

点击:

json

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

滚动, 输入文本等操作也可支持。

Step 7: Cleanup

步骤7：清理资源

Always stop the app when done to free up ports and resources.

Use
```
mcp_dart-mcp-server_stop_app
```
with the PID.

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

使用
```
mcp_dart-mcp-server_stop_app
```
工具并传入PID。

Example Workflow

示例工作流

Launch
```
test_driver/app.dart
```
.
Connect DTD.
Log Check: Find localhost URL.
Browser Subagent: Navigate & Screenshot (Home/Dashboard).
Flutter Driver: Tap "Tasks" tab.
Browser Subagent: Screenshot (Tasks).
Flutter Driver: Tap "Settings" tab.
Browser Subagent: Screenshot (Settings).
Stop App.

启动
```
test_driver/app.dart
```
.
连接 DTD.
检查日志: 找到本地URL.
浏览器子代理: 导航并截图（首页/仪表盘）.
Flutter Driver: 点击"Tasks"标签页.
浏览器子代理: 截图（任务页面）.
Flutter Driver: 点击"Settings"标签页.
浏览器子代理: 截图（设置页面）.
停止应用.