mcp_flutter MCP — حالات الاستخدام, التثبيت & عرض مباشر

لماذا تستخدمه

الميزات الأساسية

get_app_errors — معلومات الخطأ المكثفة من التطبيق الذي يعمل
view_screenshot — لقطات شاشة حقيقية (يمكن تفعيلها باستخدام --images)
get_view_details — حجم الشاشة ونسبة البكسل ومعلومات widget
تسجيل الأدوات الديناميكية — يسجل تطبيقك أدوات مخصصة في وقت التشغيل
يعمل مع Cursor و Claude (Desktop/Code) و Cline و Windsurf عبر stdio

عرض مباشر

كيف يبدو في الممارسة

flutter.replay ▶ جاهز

0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "flutter",
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json

{
  "context_servers": {
    "flutter": {
      "command": {
        "path": "TODO",
        "args": [
          "See README: https://github.com/Arenukvern/mcp_flutter"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add flutter -- TODO 'See README: https://github.com/Arenukvern/mcp_flutter'

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: mcp_flutter

تصحيح خطأ عرض Flutter مع رؤية ذكية اصطناعية على التطبيق الذي يعمل

👤 مطورو Flutter ⏱ ~15 min intermediate

متى تستخدمه: أنت تعمل على واجهة المستخدم وشيء ما تعطل. بدلاً من وصفه، دع الذكاء الاصطناعي يرى لقطة الشاشة + الأخطاء.

المتطلبات الأساسية

تطبيق Flutter مع حزمة mcp_toolkit — أضفها إلى pubspec.yaml وهيئها في main()
التشغيل في وضع تصحيح الأخطاء — flutter run — يتصل الخادم بخدمة Dart VM

الخطوات

اتصل

اتصل بتطبيق Flutter الذي يعمل لديّ (منفذ VM 8181) عبر mcp_flutter.✓ تم النسخ

→ قائمة الأدوات تتضمن الآن get_app_errors و view_screenshot
التقط الحالة

خذ لقطة شاشة للعرض الحالي. اسحب أيضاً أي أخطاء من آخر 60 ثانية.✓ تم النسخ

→ لقطة الشاشة + سجل الأخطاء
اقترح إصلاح

بناءً على هذا الخطأ ولقطة الشاشة، ما هي المشكلة وكيف أصلحها؟✓ تم النسخ

→ اقتراح diff الكود

النتيجة: حلقة تصحيح أخطاء محكمة حيث يمكن للذكاء الاصطناعي التحقق من كل إصلاح بالنظر إلى لقطة الشاشة التالية.

المزالق

أداة لقطة الشاشة معطلة بشكل افتراضي — ابدأ الخادم باستخدام علم --images
تضارب منفذ VM عند تشغيل تطبيقات متعددة — حدد --vm-service-port لكل تطبيق؛ الافتراضي 8181

كشف حزام الاختبار الخاص بتطبيقك كأدوات MCP

👤 مطورو Flutter الذين يبنون سير عمل ضمان الجودة ⏱ ~30 min intermediate

متى تستخدمه: يحتوي تطبيقك على seeders / state toggles خاصة بالاختبار فقط تريد من الذكاء الاصطناعي استدعاؤها أثناء التطوير.

الخطوات

سجل الأدوات في Dart

باستخدام mcp_toolkit، سجل الأدوات seed_users(count: int) و set_feature_flag(name: str, value: bool) في مهيج الاختبار الخاص بتطبيقي.✓ تم النسخ

→ مقطع Dart يسجل الأدوات
امنح الأوامر من Claude

أنشئ 10 مستخدمين، غير علم الميزة 'new_checkout' إلى true، خذ لقطة شاشة لشاشة الدفع.✓ تم النسخ

→ تسلسل استدعاء أداة متعدد الخطوات مع لقطة شاشة نهائية

النتيجة: ضمان جودة يدوي أسرع من خلال معالجة الحالة المدفوعة بالدردشة.

المزالق

الأدوات المشحونة إلى وضع الإصدار عن طريق الخطأ — احجب التسجيل باستخدام kDebugMode — لا ترى بنيات الإصدار هذه

فهم شجرة widget محيرة

👤 مطورو Flutter الذين يرثون كود شخص آخر ⏱ ~20 min intermediate

متى تستخدمه: أنت تحاول فهم سبب عرض الشاشة بطريقة معينة والكود يحتوي على 8 مستويات من Builders المتداخلة.

الخطوات

احصل على تفاصيل العرض

احصل على تفاصيل العرض للشاشة الحالية وملخص التسلسل الهرمي لـ widget.✓ تم النسخ

→ ملخص شجرة widget
اسأل لماذا

لماذا يتجاوز هذا النص؟ اشر إلى widgets محددة في الشجرة.✓ تم النسخ

→ منطق التخطيط المستند إلى الشجرة الفعلية

النتيجة: دمج أسرع في كود Flutter غير المألوف.

المزالق

أشجار widget الكبيرة تنفجر في ميزانية الـ token — اطلب ملخص محدود العمق أولاً، ثم احفر

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

flutter + git-2

حلقة التصحيح → الإصلاح → الالتزام

لقطة شاشة، تشخيص، اطلب مني تطبيق الإصلاح، ثم git_commit برسالة تصف الإصلاح.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداة	المدخلات	متى تستدعيها	التكلفة
get_app_errors	since?: int (seconds)	بعد تفعيل خطأ في التطبيق الذي يعمل	free
view_screenshot		التحقق البصري؛ يتطلب علم --images	tokens per image
get_view_details		فهم التخطيط / هندسة الشاشة	free
<custom>	Varies per app registration	أي شيء تسجله عبر mcp_toolkit	free

التكلفة والحدود

تكلفة التشغيل

حصة API: لا توجد
الرموز لكل استدعاء: لقطات الشاشة كبيرة (~1-3k رموز رؤية)؛ أشجار widget 500-5k
التكلفة المالية: مجاني، MIT
نصيحة: عطل لقطات الشاشة (أزل --images) عند تصحيح المشاكل غير البصرية — شجرة widget + الأخطاء أرخص بكثير.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا توجد — يتصل بخدمة Dart VM المحلية

نقل البيانات الخارجي: محلي فقط في الاستخدام النموذجي؛ لقطات الشاشة تذهب إلى مزود LLM الخاص بك

لا تمنح أبدًا: لا تكشف منفذ خدمة VM للشبكة في بناء الإصدارات

يعمل فقط في وضع التصحيح/الملف الشخصي — بناء الإصدارات يقفل خدمة VM.
تم الاختبار على macOS/iOS؛ دعم Android و desktop مميز بـ 'لم يتم الاختبار' في README.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Cannot connect to Dart VM

ابدأ تطبيق Flutter الخاص بك أولاً، ثم خادم MCP. تأكد من أن منفذ VM (عادة 8181) يطابق الإعدادات.

تحقق: curl http://127.0.0.1:8181/

Screenshots return 404

تم بدء الخادم بدون علم --images. أعد التشغيل باستخدام العلم.

Custom tools not showing up

يجب تهيئة mcp_toolkit بعد runApp؛ تحقق من أن بوابة kDebugMode ليست false في بنائك.

البدائل

mcp_flutter مقابل البدائل

البديل	متى تستخدمها	المقايضة
Flutter DevTools MCP	تريد الأدوات الرسمية للـ Flutter	غير موجودة بعد كـ MCP؛ هذا هو الأقرب

mcp_flutter

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

التثبيت

اختر العميل

حالات الاستخدام

استخدامات عملية: mcp_flutter

تصحيح خطأ عرض Flutter مع رؤية ذكية اصطناعية على التطبيق الذي يعمل

المتطلبات الأساسية

الخطوات

المزالق

كشف حزام الاختبار الخاص بتطبيقك كأدوات MCP

الخطوات

المزالق

فهم شجرة widget محيرة

الخطوات

المزالق

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

الأدوات

ما يوفره هذا الـ MCP

التكلفة والحدود

تكلفة التشغيل

الأمان

الصلاحيات والأسرار ونطاق الأثر

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

البدائل

mcp_flutter مقابل البدائل

المزيد

الموارد