mcpField
F
flutter-control-and-screenshot

flutter-control-and-screenshot

github.com/rodydavisテスト・品質60266 回インストール2 週間前に更新
リポジトリ

flutter-control-and-screenshot について

Flutter Driverを設定し、Dart MCPサーバー経由でFlutterアプリを操作するスキルです。アプリの起動、DTDへの接続、ウィジェット操作、スクリーンショット撮影を案内し、Webアプリ向けのブラウザ代替手順も扱います。

主な機能

  1. 01flutter_driver対応の設定
  2. 02Dart MCPサーバー経由のアプリ起動
  3. 03Data Tooling Daemonへの接続
  4. 04ウィジェットツリーの確認と操作
  5. 05Web向け代替手段での撮影
  6. 06テスト後のアプリ停止

活用シーン

  1. 01Flutterプロジェクトへのドライバーテスト追加
  2. 02対応デバイスでのテストアプリ起動
  3. 03ウィジェットのタップやテキスト入力
  4. 04ChromeでのWebアプリ画面撮影

MCP 対応

Dart MCPサーバーを使ってFlutterアプリを起動・操作し、DTDへの接続、ログ取得、アプリ停止を行います。ウィジェットツリーの確認やFlutter Driverの操作にも同サーバーのツールを使います。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rodydavis/skills --skill flutter-control-and-screenshot

インストール後、Claude Code で/flutter-control-and-screenshotを入力して読み込まれたか確認します。

詳細

Flutter ドライバー制御とスクリーンショット

このスキルでは、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：ドライバーのエントリーポイントを作成する

通常は test_driver/app.dart に個別のエントリーポイントを作成し、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 に接続する

起動手順で返された URI を指定して、mcp_dart-mcp-server_connect_dart_tooling_daemon を使用してください。

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

ステップ 5：Web のスクリーンショット撮影方法（ブラウザーサブエージェント）

**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. ブラウザーサブエージェント：移動してスクリーンショットを撮影します（ホーム／ダッシュボード）。
  5. Flutter Driver：「Tasks」タブをタップします。
  6. ブラウザーサブエージェント：スクリーンショットを撮影します（タスク）。
  7. Flutter Driver：「Settings」タブをタップします。
  8. ブラウザーサブエージェント：スクリーンショットを撮影します（設定）。
  9. アプリを停止します。

コメント

Markdown 対応