はじめに
Flutter/Dartの開発中に「このAPIの使い方どうだったっけ？」「このエラー、何が原因？」と悩む時間、もったいないと思いませんか？
Dart & Flutter MCP Server を使えば、Claude CodeがFlutterプロジェクトの構造を深く理解した状態でコーディングの補助をしてくれます。コード解析・パッケージ管理・テスト実行まで自然言語で指示できるので、開発スピードが大きく変わります。
この記事では、公式のDart & Flutter MCP Server をMac（Apple Silicon）上で Claude Code と連携させる手順を解説します。
この記事でできるようになること
- Flutter/Dartプロジェクトをコンテキストとして認識させた状態でClaude Codeと会話できる
- 自然言語でコードエラーの解析・修正を依頼できる
- pub.devのパッケージ検索や
pubspec.yamlの更新をAIに任せられる - テスト実行と失敗修正をワンプロンプトで依頼できる
動作環境
| 項目 | バージョン |
|---|---|
| macOS | Sequoia 15.x（Apple Silicon） |
| Dart SDK | 3.9以降（必須） |
| Flutter | 3.35以降（必須） |
| Node.js | 18以上 |
| Claude Code | 最新版 |
Dart 3.9 / Flutter 3.35 より前のバージョンでは dart mcp-server コマンドが存在しないため、まずFlutterをアップデートしてください。
手順の全体像
Step 1: Flutter/Dartのバージョン確認・アップデート
Step 2: Claude Code のインストール
Step 3: MCP Server を Claude Code に登録
Step 4: Flutter プロジェクトで動作確認
Step 1: Flutter/Dartのバージョン確認・アップデート
まず現在のバージョンを確認します。
dart --version
flutter --version
Dart 3.9未満の場合はアップデートしてください。
flutter upgrade
アップデート後、dart mcp-server コマンドが使えることを確認します。
dart mcp-server --help
ヘルプが表示されればOKです。
Step 2: Claude Code のインストール
Claude Codeはターミナルで動くAIコーディングアシスタントです。npmでインストールします。
npm install -g @anthropic-ai/claude-code
インストール確認：
claude --version
初回起動時にAnthropicアカウントの認証が必要です。
claude
ブラウザが開いてログイン画面が表示されるので、Anthropicアカウントでログインしてください。
Claude Codeはターミナルから起動することが重要です。DockやLaunchpadから起動すると環境変数（PATHなど）が引き継がれず、dartコマンドが見つからないエラーになることがあります。
Step 3: MCP Server を Claude Code に登録
方法A：コマンドで登録（簡単）
claude mcp add dart-flutter -- dart mcp-server
これだけで登録完了です。
方法B：設定ファイルを手動作成
プロジェクトルートに .claude/mcp.json を作成する方法です。チームで設定を共有したい場合に便利です。
mkdir -p .claude
.claude/mcp.json を以下の内容で作成：
{
"mcpServers": {
"dart-flutter": {
"command": "dart",
"args": ["mcp-server"]
}
}
}
登録確認
claude mcp list
dart-flutter が表示されていれば登録成功です。
Step 4: Flutter プロジェクトで動作確認
Flutterプロジェクトのディレクトリに移動して Claude Code を起動します。
cd your_flutter_project
claude
起動したら、以下のようなプロンプトを試してみてください。
動作確認プロンプト例：テキストを日本語に変更する
シンプルな例として、プロジェクト作成後に初期に表示されるHello World という文字列を「こんにちわ！」に変えてもらいます。
入力したプロンプト：
プロンプト：
Hello Worldという文字列を「こんにちわ！」に変更してください
Claude Codeの動作：
⏺ "Hello World"という文字列を検索します。
Searched for 3 patterns
⏺ 見つかりました。lib/main.dart:106 に 'hello world' があります。
Read 1 file
⏺ Update(lib/main.dart)
⎿ Added 1 line, removed 1 line
103 Widget build(BuildContext context) {
104 return const Scaffold(
105 body: Center(
106 - child: Text('hello world'),
106 + child: Text('こんにちわ！'),
107 ),
108 );
109 }
⏺ lib/main.dart:106 の 'hello world' を 'こんにちわ！' に変更しました。
プロジェクト内のファイルを自動で検索し、該当箇所を特定してコードを書き換えるところまで一気にやってくれます。あとはアプリを再起動して表示を確認するだけです。
MCP Server でできること一覧
| 機能 | 内容 |
|---|---|
| コード解析・修正 |
dart analyze 相当のエラー検出と自動修正 |
| シンボル解決 | クラス・関数の存在確認、ドキュメント取得 |
| アプリ操作 | 実行中アプリの状態確認、ホットリロード |
| パッケージ検索 | pub.devから最適パッケージを検索 |
| 依存関係管理 |
pubspec.yaml へのパッケージ追加・更新 |
| テスト実行 | テスト実行と結果解析 |
| コードフォーマット |
dart format と同等のフォーマット |
よくあるトラブルと対処法
dart mcp-server: command not found
Dartのバージョンが3.9未満の可能性があります。
flutter upgrade
dart --version # 3.9以上であることを確認
Claude Code から dart が認識されない
ターミナルの PATH が正しく設定されているか確認します。
which dart
# 例: /Users/username/fvm/default/bin/dart
~/.zshrc または ~/.zprofile にFlutter SDKのパスが追加されているか確認してください。
# 例（パスは環境に合わせて変更）
export PATH="$PATH:$HOME/flutter/bin"
変更後はターミナルを再起動し、新しいターミナルから claude を起動してください。
Rootsサポートがないクライアントでの対応
一部のクライアントでRootsが正しく機能しない場合は、--force-roots-fallback フラグを使います。
{
"mcpServers": {
"dart-flutter": {
"command": "dart",
"args": ["mcp-server", "--force-roots-fallback"]
}
}
}
実際の使用例：RenderFlexエラーを一発修正
FlutterのUIを組んでいると頻繁に遭遇するオーバーフローエラーを例に、MCP Serverの威力を体験してみましょう。
アプリを実行中に以下のようなエラーが出た場合：
A RenderFlex overflowed by 42 pixels on the right.
Claude Codeに次のように依頼するだけです：
RenderFlexのオーバーフローエラーが出ています。
実行中のアプリのレイアウトを確認して修正してください。
MCP Server経由でClaude Codeは以下を自動実行します：
- ランタイムエラーの取得
- ウィジェットツリーの解析
- 原因箇所の特定
- コードの修正提案・適用
まとめ
公式 Dart & Flutter MCP Server を Claude Code と連携させることで、Flutter開発のDXが大きく向上します。
設定手順を振り返ると：
- Dart 3.9以上 にアップデート
-
Claude Code を
npm install -g @anthropic-ai/claude-codeでインストール -
claude mcp add dart-flutter -- dart mcp-serverで登録 - Flutterプロジェクトで
claudeを起動して使う
複雑なエラーの解析も、パッケージの調査も、自然言語で任せられる時代になりました。ぜひ試してみてください！