flutter-control-and-screenshot

name	flutter-control-and-screenshot
description	Guide on how to control a Flutter app using flutter_driver via MCP and capture screenshots.

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

1. Dart MCP Server: Ensure the dart-mcp-server is active.
2. 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