flutter-dev
بناء تطبيقات Flutter متعددة المنصات
يتطلب بناء تطبيقات عالية الجودة متعددة المنصات إتقان العديد من أنماط Flutter وأساليب إدارة الحالة. يوفر هذا المهارة إرشادات منظمة حول أنماط الويدجت وإدارة الحالة عبر Riverpod و Bloc والتنقل باستخدام GoRouter وتحسين الأداء والتنفيذات الخاصة بكل منصة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "flutter-dev". أرني كيفية إعداد GoRouter مع حراس المصادقة
النتيجة المتوقعة:
- إعداد GoRouter مع دالة إعادة توجيه تتحقق من حالة المصادقة
- تعريف مسارات لتسجيل الدخول والشاشة الرئيسية والشاشات المحمية
- تنفيذ إعادة توجيه ترسل غير المصادق عليهم إلى صفحة تسجيل الدخول
- الحفاظ على حالة التنقل أثناء إعادة توجيه المصادقة
استخدام "flutter-dev". كيف أختبار ويدجت Flutter قائم على Bloc؟
النتيجة المتوقعة:
- كتابة اختبارات ويدجت باستخدام pumpWidget مع غلاف ProviderScope
- استخدام Mocktail لمحاكاة تبعيات المستودع
- تفعيل تفاعلات المستخدم باستخدام طريقي find و tap
- التحقق من تغيرات الحالة المتوقعة في واجهة المستخدم باستخدام expect
التدقيق الأمني
آمنThis skill consists entirely of markdown documentation files (SKILL.md and 12 reference files) containing Dart/Flutter code examples and development best practices. The static analyzer flagged 583 patterns, but all are false positives caused by misinterpreting markdown code fence backticks as shell commands and treating documentation content as executable code. No actual scripts, network calls, filesystem operations, or external commands are present. The skill is safe to publish.
درجة الجودة
ماذا يمكنك بناءه
بنية بدء تشغيل تطبيق الهاتف
إعداد مشروع Flutter جديد ببنية قائمة على الميزات مع تنقل GoRouter وإدارة حالة Riverpod من البداية.
الترحيل لإدارة الحالة
ترحيل تطبيق Flutter موجود من setState إلى Riverpod أو Bloc للحصول على تنظيم أفضل للحالة وقابلية أعلى للاختبار.
مراجعة تحسين الأداء
تحديد وإصلاح اختناقات الأداء باستخدام تشكيل DevTools والتحسين الثابت وأنماط RepaintBoundary.
جرّب هذه الموجهات
ساعدني في إعداد مشروع Flutter جديد ببنية مجلدات قائمة على الميزات. قم بتضمين GoRouter للتنقل و Riverpod لإدارة الحالة. اعرض نقطة الدخول الرئيسية ومجلد ميزة أساسي.
أرني كيفية تنفيذ مسار مصادقة المستخدم باستخدام Riverpod. قم بتضمين StateNotifierProvider لحالة المصادقة ونموذج تسجيل دخول مع التحقق والتنقل إلى الشاشة الرئيسية عند النجاح.
راجع شجرة الويدجت هذه في Flutter وحدد مشاكل الأداء. اقترح أين يمكن استخدام البانيات الثابتة و RepaintBoundary و ListView.builder. اشرح تأثير كل تحسين.
أنشئ إعداد عميل Dio HTTP مع معترضات المصادقة ومعالجة الأخطاء ومنطق إعادة المحاولة. قم بتضمين نمط المستودع لاستدعاءات API واعرض كيفية دمجه مع مزودي Riverpod.
أفضل الممارسات
- استخدم البانيات الثابتة على جميع الويدجتات الثابتة لمنع إعادة البناء غير الضرورية وتقليل استخدام الذاكرة
- اختر Riverpod لإدارة الحالة البسيطة وحقن التبعيات واختر Bloc لتدفقات الحالة المعقدة القائمة على الأحداث
- قم بالتشخيص باستخدام Flutter DevTools في وضع البروفايل قبل التحسين لتحديد اختناقات الأداء الفعلية
تجنب
- تجنب استخدام setState للحالة المشتركة التي تعتمد عليها عدة ويدجتات. استخدم حلاً لإدارة الحالة بدلاً من ذلك
- لا تضع استدعاءات API أو العمليات الحسابية الثقيلة داخل طرق البناء. استخدم المزودات أو العوازل للأعمال غير المتزامنة
- لا تتخطى البانيات الثابتة على الويدجتات الثابتة أبداً. عدم وجود const يمنع Flutter من تخطي الأشجار الفرعية غير المتغيرة للويدجتات