Flutter Connect Wirelessly 📶📱

Luxury Wireless ADB, Screen Mirroring & Real-Time Device Diagnostics for Flutter

A state-of-the-art developer dashboard extension for VS Code, Cursor, and Antigravity IDE designed with a premium Burgundy & Obsidian Jet-Black theme. Connect, debug, run, hot reload, mirror screens with zero latency, and stream live device logcat/crashes in real-time with zero cables and zero terminal clutter.

[!IMPORTANT] Network Requirements (3 Supported Modes):

1. 🌐 Standard Wi-Fi Router: Both Phone and PC connected to the same home or office router.
2. 📱 Mobile Hotspot from Phone: Turn on Portable Hotspot on your phone and connect your PC / Mac to it.
3. 💻 Mobile Hotspot from PC: Turn on Mobile Hotspot on your Windows / Mac and connect your phone to it. All three connection modes work seamlessly!

🎨 What's New in v1.2.0 (The Burgundy Dashboard)

• 💎 Premium Burgundy & Obsidian Dashboard: A custom sidebar interface built for mobile developers.
• 📱 Live Device Info Card: Real-time display of phone model (e.g. Realme, Samsung, Xiaomi), live Battery percentage (🔋 %), charging state, Android version, and network type.
• 📜 Real-Time Device Logs & Crash Stream:
  • Live device logcat streaming directly in the sidebar.
  • One-click filters: All Logs, Flutter Only, Crashes & Errors, Warnings.
  • Search filter, auto-scroll toggle, and copy-to-clipboard.
• ⚡ Quick Developer Tools:
  • 📸 Screenshot: Instant screenshot capture saved directly to your workspace.
  • 💡 Wake Screen: Turn on physical screen with a single click.
  • 📶 Fix Wi-Fi: Auto-reboot and re-heal device wireless interface.
  • 🔄 Refresh: Instant device scan.

📖 Step-by-Step Setup Guide (First Time Only)

You only need to plug in a USB cable once for 10 seconds to authorize your computer. After that, you never need the cable again!

Step 1: Enable Developer Options & USB Debugging on your Phone

1. Open your phone's Settings.
2. Go to About Phone (or About Device).
3. Find Build Number and tap it 7 times continuously until you see the message: "You are now a developer!".
4. Go back to Settings > System (or Additional Settings) > Developer Options.
5. Scroll down and turn ON the toggle for USB Debugging.

Step 2: Ensure Same Wi-Fi Network or Hotspot

• Connect your computer and your phone to the same Wi-Fi router or Mobile Hotspot.

Step 3: Plug USB Cable & Authorize Computer

1. Connect your phone to your computer using a USB cable.
2. An authorization popup will appear on your phone screen:

   "Allow USB debugging from this computer?"

3. ✅ Check the box: "Always allow from this computer" and tap Allow / OK.

Step 4: Click Connect & Unplug!

1. In the sidebar Burgundy Dashboard or status bar, click ⚡ 1-Click Wireless Connect.
2. The extension automatically detects your phone, fetches its IP, and configures port 5555.
3. 🎉 Unplug the USB cable! You are now 100% wireless!

🌟 Detailed Feature Breakdown

1. ⚡ 1-Click Wireless ADB Connection

• Automatically discovers your connected phone.
• Configures ADB TCP/IP on port 5555 automatically.
• Remembers your phone's IP address for instant 1-click reconnects in future sessions without ever touching a USB cable.

2. ⚡ Mirror Screen (Fast Mode / Zero-Lag) — Recommended

• Streams your phone screen directly on top of your IDE at 60 FPS with < 25ms ultra-low latency.
• Instant mouse clicking, swiping, typing, and direct touch emulation with zero perceptible lag over Wi-Fi.

3. 🔋 Mirror & Turn Off Phone Display (Battery Saver)

• Streams the screen to your PC while powering off the physical phone screen.
• Eliminates battery drain and prevents phone overheating while you code.
• Keeps Flutter Run & Debugger 100% alive in the background without dropping connection!
• 💡 Keyboard Shortcut: Press Alt + O inside the mirror window at any time to toggle the physical phone display ON or OFF!

4. 🖥️ Mirror Screen (HD Quality)

• Streams in your device's full native high-definition resolution. Perfect for inspecting pixel-perfect UI designs.

5. 🛡️ Smart Anti-Sleep & Always-Alive Engine

• Automatically disables Android Doze Mode and Light Idle Mode upon connection.
• 🛡️ Anti-App-Freeze Shield: Automatically disables Android's Cached App Process Freezer, Phantom Process Killer, and Standby Buckets so Flutter Run & Dart VM Debugger stay 100% alive even when you minimize the app, switch to other apps, or return to the home screen!
• Forces Wi-Fi sleep policy to Never Sleep, preventing Android from cutting off the TCP connection when the phone screen turns off.
• Background watchdog reconnects within 500ms if any Wi-Fi hiccup occurs.

6. 📜 Real-Time Diagnostics & Crash Log Stream

• View live Android logcat and Flutter console outputs inside your sidebar.
• Quickly isolate fatal exceptions and crashes during development.

🇪🇬 الدليل باللغة العربية (Arabic Documentation)

إضافة متطورة وشاملة لبرامج VS Code و Cursor و Antigravity IDE بواجهة عصرية فائقة الفخامة بلون البرجاندي والأسود الملكي (Burgundy & Obsidian Theme). تتيح لك ربط الموبايل الحقيقي بالكمبيوتر لاسلكياً (Wireless ADB)، وتشغيل الرن وعمل Hot Reload، مع عرض شاشة الموبايل والتحكم فيها بالماوس بدون لاج، ومتابعة سجلات وأخطاء الموبايل (Live Logs & Crashes) مباشرة في لوحة التحكم الجانبية!

[!IMPORTANT] خيارات الشبكة المدعومة (3 طرق للاتصال):

1. 🌐 راوتر واي فاي عادي: الموبايل والكمبيوتر متصلين بنفس شبكة الراوتر المنزلي أو المكتبي.
2. 📱 هوت سبوت من الموبايل للكمبيوتر: افتح نقطة اتصال الهوت سبوت (Mobile Hotspot) من الموبايل ووصّل اللاب توب بيها.
3. 💻 هوت سبوت من الكمبيوتر للموبايل: افتح Hotspot من اللاب توب ووصّل الموبايل بيه. جميع الطرق الثلاثة مدعومة وتعمل 100% بكفاءة عالية وبدون انقطاع!

🎨 الجديد في الإصدار 1.2.0 (لوحة تحكم البرجاندي الفاخرة)

• 💎 واجهة تحكم جانبية كاملة (Dashboard): تصميم فخم وعصري بألوان الأسود الفاحم والبرجاندي الفاخر.
• 📱 كارت الجهاز الذكي الحي (Device Card):
  • يعرض اسم الموبايل وموديله بدقة (مثل Realme, Samsung, Xiaomi).
  • يعرض نسبة البطارية الحية 🔋 % مع أيقونة الشحن الذكي.
  • يعرض إصدار الأندرويد ونوع الشبكة (Wi-Fi أو Hotspot).
• 📜 شاشة السجلات والأخطاء المباشرة (Live Logs):
  • عرض كونسول حي لسجلات الموبايل والـ Logcat في الوقت الفعلي.
  • فلاتر فورية: All Logs، Flutter Only، Crashes & Errors، Warnings.
  • شريط بحث في السجلات، زرار نسخ فوري للكليب بورد، وزرار تنظيف الكونسول.
• ⚡ أدوات المطور السريعة (Quick Tools):
  • 📸 سكرين شوت فوري: يلتقط شاشة الموبايل ويحفظها مباشرة في مجلد المشروع.
  • 💡 تنوير الشاشة: إشعال شاشة الموبايل بضغطة واحدة من اللاب.
  • 📶 إصلاح الواي فاي: إعادة تهيئة كارت شبكة الموبايل تلقائياً عند أي بطء.

📖 خطوات التسطيب والتشغيل لأول مرة (لمرة واحدة فقط)

تحتاج لتوصيل كابل الـ USB لمرة واحدة فقط لمدة 10 ثوانٍ لتعريف الموبايل على الكمبيوتر، وبعدها لن تحتاج للكابل نهائياً!

الخطوة 1: تفعيل وضع المطور وتصحيح USB (USB Debugging)

1. افتح الإعدادات (Settings) في موبايلك.
2. انزل إلى حول الهاتف (About Phone) أو معلومات الجهاز.
3. ابحث عن رقم الإصدار (Build Number) واضغط عليه 7 مرات متتالية حتى تظهر رسالة: "أنت الآن مطور برامج!".
4. ارجع خطوة للخلف وادخل على النظام (System) أو الإعدادات الإضافية (Additional Settings) > ثم خيارات المطور (Developer Options).
5. فعّل خيار تصحيح أخطاء USB (USB Debugging).

الخطوة 2: التأكد من الاتصال بنفس شبكة الواي فاي أو الهوت سبوت

• تأكد من توصيل الكمبيوتر والموبايل بنفس شبكة الواي فاي أو شبكة الهوت سبوت.

الخطوة 3: توصيل الكابل والموافقة على الصلاحية

1. وصّل الموبايل بالكمبيوتر باستخدام كابل الـ USB.
2. ستظهر نافذة تنبيه على شاشة الموبايل:

   "هل تريد السماح بتصحيح أخطاء USB من هذا الكمبيوتر؟"

3. ✅ ضع علامة صح في المربع: "السماح دائماً من هذا الكمبيوتر (Always allow from this computer)" ثم اضغط سماح (Allow).

الخطوة 4: اضغط اتصال وافصل الكابل!

1. في لوحة التحكم الجانبية أو في شريط الحالة السفلي، اضغط على زر ⚡ 1-Click Wireless Connect.
2. ستقوم الإضافة بقراءة عنوان الآي بي الخاص بهاتفك تلقائياً وتفعيل المنفذ 5555.
3. 🎉 افصل كابل الـ USB الآن! جهازك أصبح متصلاً وايرلس 100%!

🌟 شرح تفصيلي لجميع مميزات الإضافة

1. ⚡ الاتصال الوايرلس بضغطة زر (Connect Wireless)

• تكتشف الهاتف تلقائياً وتفعل بروتوكول ADB اللاسلكي.
• تحفظ عنوان الآي بي (IP) الخاص بهاتفك للاتصال الفوري في المرات القادمة بدون كابلات.

2. ⚡ عرض الشاشة السريع بدون لاج (Mirror Screen - Fast Mode) — موصى به

• تعرض شاشة هاتفك فوق كود المشروع مباشرة بسرعة 60 إطار في الثانية (60 FPS) وزمن استجابة أقل من 25ms.
• تحكم كامل وفوري بالماوس (كليك، سحب، كتابة بالكيبورد) بدون أي تقطيع أو بطء عبر الواي فاي.

3. 🔋 عرض الشاشة مع إطفاء شاشة الموبايل (Mirror & Turn Off Phone Display)

• تعرض شاشة الهاتف وتتيح التحكم الكامل بها من الكمبيوتر، بينما شاشة الموبايل الفيزيائية تكون مطفأة تماماً (شاشة سوداء) لتوفير البطارية ومنع السخونة.
• تحافظ على جلسة Flutter Run والـ Debugger شغالة 100% في الخلفية بدون ما تفصل أبداً.
• 💡 اختصار الكيبورد: اضغط Alt + O وأنت داخل شاشة الميرور في أي وقت لإشعال شاشة الموبايل أو إطفائها فوراً!

4. 🖥️ عرض الشاشة بأعلى دقة (Mirror Screen - HD Quality)

• تعرض شاشة الموبايل بدقتها الأصلية الكاملة، مثالية لمراجعة تصاميم الـ UI والتأكد من التفاصيل الدقيقة.

5. 🛡️ نظام الحماية من النوم التلقائي وإعادة الاتصال الذكي (Zero-Drop Engine)

• يقوم تلقائياً بتعطيل وضع الخمول والـ Deep Sleep في الأندرويد، ويضع الـ ADB في قائمة الـ Whitelist.
• 🛡️ درع منع تجميد التطبيقات (Anti-App-Freeze Shield): يعطل تلقائياً ميزة تجميد التطبيقات في الخلفية (Process Freezer و Quick Freeze)، ويحافظ على جلسة فلاتر والـ Dart VM Debugger شغالة 100% حتى لو خرجت من التطبيق للشاشة الرئيسية أو فتحت واتساب ورجعت له تاني بدون ما يفصل الرن أبداً!
• حارس ذكي يراقب الاتصال كل 3.5 ثانية، ويعيد الاتصال في أقل من 500ms عند أي تذبذب في الواي فاي.

6. 📜 مراقبة الكراشات وسجلات النظام المباشرة (Live Logcat)

• كونسول متطور داخل البرنامج يمكنك من مراقبة أداء تطبيق فلاتر واكتشاف أي كراش فوري مع إمكانية الفلترة والبحث.

👨‍💻 Author

Created with ❤️ by Ahmed Saad — Senior Mobile & Flutter Engineer.