Flutter MCP 2

🚀 Flutter MCP Service v2.0

Flutter MCP Service v2.0 是一套先進的 Flutter 開發工具，藉助模型上下文協議（MCP），具備智能緩存、令牌管理功能，並集成了官方文檔，能極大提升 Flutter 開發效率。

🚀 快速開始

安裝

# 克隆倉庫
git clone https://github.com/dvillegastech/flutter_mcp_2.git
cd flutter_mcp_service

# 安裝依賴
npm install

# 初始化緩存
mkdir -p .cache

# 運行健康檢查
npm run health-check

# 啟動服務
npm start

與 Claude Desktop / Cursor 集成

在你的 MCP 配置文件中添加以下內容：

{
  "mcpServers": {
    "flutter-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/flutter_mcp_service/src/index.js"]
    }
  }
}

📋 完整工具列表與命令

🆕 統一工具（v2.0）

1. flutter_status

檢查服務健康狀況和緩存統計信息。

@flutter-mcp use flutter_status to check service health

2. flutter_search

在 Flutter/Dart 文檔、包和示例中進行通用搜索。

@flutter-mcp use flutter_search with query "Container" and limit 5
@flutter-mcp use flutter_search to find ListView examples

參數：

• query（必需）：搜索詞
• limit（可選）：最大結果數（默認：10）
• maxTokens（可選）：響應大小限制（默認：4000）

3. flutter_analyze

智能的 Flutter 文檔獲取器和代碼分析器。

@flutter-mcp use flutter_analyze with identifier "Container"
@flutter-mcp use flutter_analyze with identifier "Container" and this code:
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

參數：

• identifier（必需）：小部件/類名或包名
• code（可選）：要分析的代碼
• topic（可選）："all", "docs", "analysis", "examples"（默認："all"）
• maxTokens（可選）：響應大小限制
• includeExamples（可選）：包含代碼示例（默認：true）
• includeAnalysis（可選）：包含代碼分析（默認：true）

🔧 舊版工具（向後兼容）

4. analyze_widget

分析 Flutter 小部件代碼的最佳實踐、性能和可訪問性。

@flutter-mcp use analyze_widget with this widgetCode:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}

參數：

• widgetCode（必需）：Flutter 小部件代碼
• checkAccessibility（可選）：檢查可訪問性（默認：true）
• checkPerformance（可選）：檢查性能（默認：true）

5. validate_flutter_docs

根據官方 Flutter 文檔驗證代碼。

@flutter-mcp use validate_flutter_docs with this code:
Container(
  color: Colors.red,
  decoration: BoxDecoration(color: Colors.blue), // This will be flagged
)

參數：

• code（必需）：Flutter/Dart 代碼
• widgetType（可選）：要關注的特定小部件

6. analyze_pub_package

分析 pub.dev 上的包的質量和兼容性。

@flutter-mcp use analyze_pub_package with packageName "provider"
@flutter-mcp use analyze_pub_package with packageName "dio" and checkDependencies true

參數：

• packageName（必需）：pub.dev 上的包名
• checkDependencies（可選）：分析依賴項（默認：true）
• checkScores（可選）：獲取 pub.dev 評分（默認：true）

7. suggest_improvements

根據 Flutter 最佳實踐獲取改進建議。

@flutter-mcp use suggest_improvements for this code:
ListView(
  children: List.generate(1000, (i) => Text('Item $i')),
)

參數：

• code（必需）：Flutter 代碼
• focusArea（可選）："performance", "accessibility", "maintainability", "all"

8. analyze_performance

分析 Flutter 小部件樹的性能問題。

@flutter-mcp use analyze_performance with this widgetTree:
Column(
  children: [
    for (int i = 0; i < 100; i++)
      Container(child: Text('Item $i')),
  ],
)

參數：

• widgetTree（必需）：小部件樹代碼
• checkRebuildOptimization（可選）：檢查重建優化（默認：true）
• checkMemoryLeaks（可選）：檢查內存洩漏（默認：true）

9. analyze_architecture

分析項目架構的合規性。

@flutter-mcp use analyze_architecture with projectStructure {
  "lib": {
    "features": ["auth", "home", "profile"],
    "core": ["network", "database"],
    "shared": ["widgets", "utils"]
  }
} and pattern "clean"

參數：

• projectStructure（必需）：項目目錄結構
• pattern（可選）："clean", "mvvm", "mvc", "auto"
• checkDependencies（可選）：檢查依賴項違規（默認：true）

10. analyze_bundle_size

分析應用程序包大小並提供優化建議。

@flutter-mcp use analyze_bundle_size with buildPath "/path/to/build" and platform "android"

參數：

• buildPath（必需）：構建輸出路徑
• platform（可選）："android", "ios", "web", "all"
• includeAssets（可選）：包含資產分析（默認：true）

11. generate_tests

生成全面的 Flutter 測試。

@flutter-mcp use generate_tests for this widgetCode:
class CounterButton extends StatelessWidget {
  final VoidCallback onPressed;
  final int count;
  
  const CounterButton({required this.onPressed, required this.count});
  
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text('Count: $count'),
    );
  }
}

參數：

• widgetCode（必需）：小部件代碼
• testType（可選）："unit", "widget", "integration", "golden", "all"
• includeAccessibility（可選）：包含可訪問性測試（默認：true）

12. trace_state

跟蹤 Flutter 小部件中的狀態流和重建。

@flutter-mcp use trace_state with this widgetCode:
class MyStatefulWidget extends StatefulWidget {
  // ... widget code
}

參數：

• widgetCode（必需）：小部件代碼
• traceRebuildPaths（可選）：跟蹤重建路徑（默認：true）
• generateVisualization（可選）：生成可視化（默認：true）

13. generate_clean_architecture

生成 Clean Architecture 結構。

@flutter-mcp use generate_clean_architecture with projectName "todo_app" and features ["auth", "todos", "settings"]

參數：

• projectName（必需）：項目/功能名稱
• features（必需）：功能列表
• stateManagement（可選）："riverpod", "bloc", "provider", "getx"
• includeDI（可選）：包含依賴注入（默認：true）

14. generate_l10n

使用 ARB 文件生成本地化設置。

@flutter-mcp use generate_l10n with languages ["en", "es", "fr"]

參數：

• languages（必需）：要支持的語言代碼
• translations（可選）：初始翻譯
• includeRTL（可選）：包含 RTL 支持（默認：true）
• includePluralization（可選）：包含複數形式（默認：true）

15. monitor_performance

生成性能監控設置。

@flutter-mcp use monitor_performance with monitoringType "balanced"

參數：

• monitoringType（必需）："comprehensive", "balanced", "lightweight"
• includeNetwork（可選）：監控網絡（默認：true）
• includeMemory（可選）：監控內存（默認：true）
• includeAnalytics（可選）：包含分析（默認：true）

16. diagnose_render_issues

診斷和修復渲染問題。

@flutter-mcp use diagnose_render_issues with this widgetCode:
Row(
  children: [
    Expanded(child: Text('Long text')),
    Container(width: double.infinity), // This will cause issues
  ],
)

參數：

• widgetCode（必需）：有問題的小部件代碼
• errorType（可選）："overflow", "constraint", "layout", "all"
• includeVisualization（可選）：包含調試可視化（默認：true）

17. analyze_test_coverage

分析測試覆蓋率並提供建議。

@flutter-mcp use analyze_test_coverage with coverageData {...} and targetCoverage 80

參數：

• coverageData（必需）：來自 lcov 的覆蓋率數據
• projectStructure（必需）：項目文件結構
• targetCoverage（可選）：目標覆蓋率百分比（默認：80）
• generateReport（可選）：生成可視化報告（默認：true）

💻 使用示例

基礎小部件分析

@flutter-mcp analyze this Flutter widget for issues:
Container(
  child: Column(
    children: List.generate(100, (i) => Text('Item $i')),
  ),
)

包研究

@flutter-mcp search for "state management" packages and analyze the top result

性能優化工作流

1. @flutter-mcp analyze_performance for my widget tree
2. @flutter-mcp suggest_improvements based on performance issues
3. @flutter-mcp generate_tests for the optimized code

全項目分析

@flutter-mcp analyze_architecture for my project and suggest clean architecture improvements

🔧 開發命令

# 開發模式，支持自動重新加載
npm run dev

# 運行測試
npm test
npm run test:integration
npm run test:coverage

# 健康檢查
npm run health-check

# 代碼檢查和格式化
npm run lint
npm run format

# Docker 相關命令
npm run build:docker
npm run docker:run

# 清理緩存
npm run clean

✨ 主要特性

• 智能緩存：採用 SQLite 和內存緩存，並設置了 TTL（Time-To-Live）。
• 令牌管理：使用 GPT - 3 編碼器進行智能截斷。
• 錯誤處理：採用斷路器模式和重試邏輯。
• 速率限制：合理使用 API（每秒 2 次請求）。
• 官方文檔集成：實時集成 Flutter/Dart 官方文檔。
• 多平臺支持：支持 npm、Docker 和直接安裝。
• 健康監控：內置健康檢查和統計功能。

🏗️ 架構

詳細的架構文檔請參考 docs/ARCHITECTURE.md。

🤝 貢獻

開發指南請參考 docs/DEVELOPMENT.md。

📄 許可證

本項目採用 MIT 許可證，詳情請查看 LICENSE 文件。

🙏 致謝

• 感謝 Flutter 團隊提供的優秀文檔。
• 感謝 MCP SDK 的貢獻者們。
• 靈感來源於 adamsmaka/flutter - mcp。

Made with ❤️ for the Flutter community