بوابة التقنية 👨🏻‍💻

🚨 Cloudflare تطلق أسهل طريقة لنشر موقعك في ثوانٍ 👀 📌 أعلنت Cloudflare عن خدمة جديدة باسم Drop. فكرتها بسيطة جدًا. اسحب مجلد موقعك أو ملف ZIP إلى الصفحة، وخلال ثوانٍ تحصل على رابط مباشر يعمل على شبكة Cloudflare العالمية. 📌 لا تحتاج إلى إنشاء حساب في البداية. ولا إعدادات معقدة. ولا Git أو أوامر Terminal. إذا كان موقعك عبارة عن HTML وCSS وJavaScript فيمكنك نشره مباشرة. 📌 طريقة الاستخدام ادخل إلى صفحة Cloudflare Drop اسحب مجلد الموقع أو ملف ZIP انتظر حتى ينتهي الرفع وسيتم إنشاء رابط مباشر لموقعك خلال ثوانٍ. وإذا أردت الاحتفاظ بالموقع بشكل دائم، يمكنك ربطه بحساب Cloudflare قبل انتهاء المهلة. 🔗 https://www.cloudflare.com/drop/

مشاكل بتواجهك وانت تبني تطبيق ب flutter: - تكبير الخط من إعدادات الجهاز وتأثيره على واجهات التطبيق. - مشاكل Bottom Navigation Bar في Android 15 وما بعده. - بقاء بيانات تسجيل الدخول في iOS بسبب تخزينها في Keychain حتى بعد حذف التطبيق وإعادة تثبيته. - وصول استجابة API بعد الخروج من الشاشة، مما يؤدي إلى إرسال State على Cubit تم التخلص منه (Disposed). . هذه المشاكل وغيرها حليتها في: Flutter Clean Architecture Template ✅ https://github.com/MokarmDev/flutter-clean-architecture-template

بنزلكم سلسلة بالتفصيل لكل المشاكل والحلول اللي موجودة في flutter وكيف حليتها وجهزتها لكم في flutter clean architecture template ✅

أي مطور flutter لما يبدء يسوي أي مشروع لازم يركز على البنية تبع المشروع بحيث تكون مرنة وسهل الصيانة والتطوير والتعديل واختيار المكاتب والتقنيات القوية للمشروع، أشياء ضرورية لازم تكون موجودة في كل مشروع نبدء فيه من الصفر، مثلاً: - أولاً تقسيم المجلدات والمعمارية الخاص بالمشروع زي مثلاً تقسيم(features, core, config) والمعمارية القابلة للصيانة والتطوير وتدعم المشاريع الكبيرة أكيد بتختار clean architecture. - تحديد نوع ال state management اللي بتمشي عليها، أنا أفضل ال bloc/cubit تتناسب مع المشاريع المتوسطة والكبيرة ولها شعبية كبيرة في flutter. - بعدها مباشرة نبدء باعداد تعدد بيئة التطوير بحيث نفصل بيئة المنتج النهائي اللي بيكون لايف على المتجر عن بيئة التطوير اثناء بناء التطبيق وأكيد بنستخدم flavors لتنظيم البيئات والفصل والتمييز بينهم. - تغيير أيقونة التطبيق وتجهيز الاعدادات الخاصة بمكتبة flutter_launcher_icons لانها تساعدنا بكل بساطة لتغيير الايقونة في android and ios. - تغيير شاشة السبلاش نيتف، لازم نجهز الإعدادات حق مكتبة flutter_native_splash الاغلب عارفين انها مزعجه. - تجهيز وتنظيم الثيم بحيث يكون يدعم الوضع الغامق والوضع الفاتح dark/light. - تجهيز واعداد الملفات والمكتبة والكلاسات الأساسية لدعم تعدد اللغات أقلها يكون يدعم لغتين عربي وأنجليزي زي مثلاً نستخدم مكتبة easy_localization. - لازم يكون تصميم التطبيق متجاوب لمختلف احجام شاشات الهواتف الذكية زي مثلاً نستخدم flutter_screenutil. - تجهز اعدادات الانتقالات بين الشاشات زي مثلاً نستخدم go_router. - تجهز اعدادات الخزين المحلي للبيانات shared_preferences and flutter_secure_storage. - تجهز ادوات مساعدة لتحسين سرعة التطوير extensions. - تجهز اعدادات التعامل مع الشبكة network زي تجهيز التواصل مع ال api وبعدين تسوي handling exceptions بحسب ال status code وتجهز بعدين شكل الرسائل بحسب الخطأ. - تجهز كلاس التحقق من الانترنت. - تجهز ازرار التنقلات لشاشة الرئيسية bottom navigation bar. - تجهز ملف env واعدادات مكتبة envvied لتشفير المفاتيح الحساسة. - تجهز ملف DI لحقن الكلاسات وتنظمها بحسب ال feature. - تجهز كلاس الصور والايقونات assets generation. - تجهز التصاميم المشتركة زي عدم الاتصال بالانترنت عدم وجود بيانات او ازرار تغيير الثيم او اللغة مع حفظ الحالة الاخيرة shared widget. - وضروري تضبط طريقة كتابة الكود وتعرف اذا عندك مشاكل في سطور معينة من خلال flutter lint تضبطها بملف analysis options. وبكل تطبيق جديد نشتغل عليه نكرر نفس الشي ونرجع ننسخ ونلصق من مشروع لمشروع.. لذلك انا سويت لكم قالب تدخل تستخدمه مباشرة مجهز فيه كل ماسبق جهزته بأفضل الطرق والتقنيات في flutter وخليت المعمارية open source عشان الجميع يستفيد منها، حتى اللي هو جينيور يقدر يتعلم منها بسطتها وبعدت عن التعقيد. ✅📍 الرابط: https://github.com/MokarmDev/flutter-clean-architecture-template

بشارك معاكم محتوى مهم جداً ومرئي على شكل صور بإذن الله تعجبكم وتتبسط المعلومات ✨🤍

كيف تحسن أداء تطبيق Flutter وتخليه أكثر سلاسة ومرونة؟ - أول شي مهم تفرق كثير هو اختيار للمعمارية اللي بتشتغل عليها، واختيار ال state management. - اختار الـ Widgets المناسبة مهم جداً، تابع تحديثات Flutter باستمرار لأن الإصدارات الجديدة تضيف Widgets وتحسينات تعطي أداء أفضل. أحياناً نستخدم Widget تحتوي على خصائص كثيرة لا نحتاجها، بينما يوجد Widget أبسط ومصممة لنفس الغرض باستهلاك أقل للموارد وأداء أفضل. - استخدم const قدر الإمكان مع الـ Widgets التي لا تتغير، هذا يقلل عمليات إعادة البناء للعناصر ويحسن الأداء بشكل ملحوظ، ممكن تفعل قواعد الـ Linter داخل ملف analysis_options.yaml لإظهار الأماكن التي يمكن إضافة const فيها، وبرضو لي إعدادات VS Code لإضافتها تلقائياً أثناء كتابة الكود.(بشاركها معاكم بمنشور منفصل) - قسم الواجهة إلى Widgets صغيرة ومستقلة بدلاً من بناء شاشة كاملة داخل Widget واحدة. هذا يخلي الكود أسهل للفهم والصيانة وتتبع الأخطاء، وأيضاً يزيد فرص الاستفادة من const وتقليل عمليات إعادة البناء غير الضرورية. - بالنسبة للصور، حاول استخدام SVG للعناصر الرسومية البسيطة، أما الصور اللي جاية من الإنترنت استخدم Image Caching لتقليل استهلاك الشبكة وتسريع تحميل الواجهة وفي مكاتب كثيرة. - استخدم RepaintBoundary لعزل عمليات الرسم (Painting) عن بقية الواجهة، خصوصاً عند التعامل مع الرسوم المتحركة (Animations) أو الصور الثقيلة أو العناصر التي يتم تحديثها بشكل متكرر. - خليك حذر وانت تستخدم أي Controller مثل: TextEditingController AnimationController ScrollController تأكد من استدعاء dispose() عند الانتهاء منه لتجنب تسريب الذاكرة (Memory Leaks) واستهلاك الموارد بدون حاجة. - في الشاشات المعقدة أو التي تحتوي على أقسام متعددة وقوائم طويلة، يفضل استخدام CustomScrollView مع الـ Slivers للحصول على أداء أفضل ومرونة أكبر. - لا تستعجل في ربط التطبيق مع الـ APIs مباشرة. حلل آلية العمل أولاً: أيش البيانات التي تحتاج إلى Cache؟ أيش البيانات التي يجب تحديثها في الخلفية؟ أيش البيانات اللي تحتاج تشفير؟ التخطيط مهم يوفر عليك وقت كبير بحل المشاكل او الصيانة والتعديل. - تجنب إرسال أكثر من طلب لنفس الـ API خلال فترة قصيرة، خصوصاً في شاشات المصادقة (Authentication) أو تنفيذ العمليات الحساسة، قم بتعطيل الزر أثناء التنفيذ لمنع المستخدم من إرسال الطلب عدة مرات. - لا تستدعي كل الـ APIs في مكان واحد، خلي كل شاشة أو Feature مسؤولة عن البيانات التي تحتاجها فقط، واستدعي البيانات عند الحاجة. - استخدم Isolates لمعالجة بيانات ضخم عشان لا تسبب العمليات الثقيلة تجميد للواجهة (UI Freeze). - تجنب تحميل جميع البيانات دفعة واحدة استخدم Pagination، خاصة في التطبيقات التي تحتوي على قوائم كبيرة. - انتبه لهيكلية الـ Widget Tree، فكلما كانت أبسط وأكثر تنظيماً كان الأداء أفضل وأسهل في الصيانة. راقب الأداء باستمرار باستخدام Flutter DevTools لمتابعة: Widget Rebuilds Memory Usage CPU Usage FrameRendering. اكتبو لي بالتعليقات لو عندكم طرق اخرى تحسن من الأداء؟