Flutter Driver Control & Screenshot

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).

Prerequisites

• Dart MCP Server: Ensure the dart-mcp-server is active.

• Flutter Project: You need a working Flutter project.

Step 1: Add Dependency

Add flutter_driver to the dev_dependencies in your pubspec.yaml .

dev_dependencies: flutter_driver: sdk: flutter

Run dart pub get or use the mcp_dart-mcp-server_pub tool.

Step 2: Create Driver Entry Point

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 .

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

Step 3: Launch App via 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.

Step 4: Connect to DTD

Use mcp_dart-mcp-server_connect_dart_tooling_daemon with the URI returned from the launch step.

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

Step 5: Web Screenshot Strategy (Browser Subagent)

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."

Step 6: Control the App (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: { "command": "tap", "finderType": "ByText", "text": "Settings" }

• Scroll, Enter Text, etc. are also available.

Step 7: Cleanup

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

• Use mcp_dart-mcp-server_stop_app with the 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.