أسباب مشكلة Hot Reload في Flutter وكيفية تجنبها

في عالم تطوير البرمجيات، تُعتبر ميزة Hot Reload واحدة من أكثر الخصائص فاعلية لتسريع عملية التطوير. فهي تسمح للمطورين بإجراء تغييرات على كتابه الكود ورؤية النتائج مباشره دون الحاجة إلى إعادة تشغيل التطبيق بالكامل. ومع ذلك، يواجه بعض المبرمجين مشكلة شائعة تتمثل في إعادة تشغيل التطبيق من البداية عند استخدام Hot Reload، خاصة عند العمل مع FutureBuilder في Main. في هذه المقالة، سنتناول معكم اشهر أسباب هذه المشكلة وكيفية حلها.

عند استخدام Hot Reload في تطبيقات Flutter أو أي إطار عمل آخر يتوفد فيه ميزه تحديث البيانات، يتوقع المطورون أن يتم تطبيق التغييرات دون إعادة تشغيل التطبيق من البدايه. لكن في بعض الاحيان، خاصة عند استخدام خاصيه FutureBuilder في فئة Main، يتم إعادة تشغيل التطبيق من البداية بدلًا من تحديث الواجهة فقط. وهذا السلوك غير مرغوب فيه حيث انه يؤدي إلى إبطاء عملية التطوير ويسبب تاخير في اختبار اجزاء التطبيق للمطورين.

استخدام FutureBuilder في Main Class:

عند استخدام FutureBuilder في الفئة الرئيسية (Main)، يتم تنفيذ العملية غير المتزامنة (async) في كل مرة يتم فيها إعادة بناء الواجهة مع الاسف. وهذا يؤدي إلى إعادة تشغيل التطبيق بالكامل بدلًا من تحديث الجزء المطلوب فقط.

إذا كانت الفئة الرئيسية تحتوي على StatefulWidget وتعتمد على بيانات غير متزامنة، فإن أي تغيير في الكود سوف يؤدي إلى إعادة بناء الواجهة بالكامل، مما يتسبب في إعادة تشغيل التطبيق من البدايه.

عدم استخدام أدوات إدارة الحالة الفعّالة مثل Provider أو Bloc قد يؤدي إلى إعادة بناء غير ضرورية للواجهة فقط يفضل استخدامه في العناصر الرئيسيه التي تحتاجها فقط.

بدلًا من وضع FutureBuilder في الفئة الرئيسية (Main Class)، قم بتحميل البيانات غير المتزامنة في مكان آخر، مثل initState في StatefulWidget وهذا يجعل البيانات يتم تحميلها مره واحده فقط، واستخدم أدوات إدارة الحالة لتحديث الواجهة.

اعتمد على أدوات إدارة الحالة مثل Provider أو Bloc لإدارة البيانات غير المتزامنة بشكل صحيح. وهذا يقلل من الحاجة إلى إعادة بناء الواجهة بالكامل ويحسن أداء التطبيق.

قم بفصل الكود إلى وحدات أصغر (modular code) وذلك لتجنب إعادة بناء الواجهة بالكامل عند إجراء تغييرات بسيطة.

في بعض الحالات، قد يكون استخدام Hot Restart بدلًا من Hot Reload أكثر فعالية، خاصة عند إجراء تغييرات كبيرة في الكود.

مشكلة إعادة تشغيل التطبيق بالكامل عند استخدام Hot Reload هي احد المشاكل التي يواجهه العديد من المطورين، خاصة عند العمل مع FutureBuilder في الفئة الرئيسية (Main Class). باتباع أفضل الممارسات مثل تحسين هيكلة الكود واستخدام أدوات إدارة الحالة، يمكنك تجنب هذه المشكلة وتحسين تجربة التطوير بشكل كبير من خلال اتباع التعليمات السابقه. بالإضافة إلى ذلك.

تشغيل التطبيق في وضع التطوير:

تأكد من أنك تعمل في وضع التطوير (Debug Mode) وليس وضع الإصدار (Release Mode). يمكنك تشغيل التطبيق باستخدام الأمر التالي لتشغيل التطبيق في وضع Debug

في وضع Debug، سوف تلاحظ ان ميزة Hot Reload مفعلة بشكل افتراضي.

تأكد من استخدام بيئة تطوير متكاملة (IDE) تدعم Flutter مثل محرر Android Studio أو Visual Studio Code.

هذه الأدوات توفر واجهة سهلة لتفعيل Hot Reload تلقائيًا عند الحفظ.

في Visual Studio Code:

انتقل إلى File > Preferences > Settings.

ابحث عن Auto Save واختر onFocusChange أو afterDelay.

في Android Studio:

انتقل إلى File > Settings > Appearance & Behavior > System Settings.

تأكد من تفعيل خيار Save files automatically.

تفعيل Hot Reload تلقائيًا عند الحفظ:

في Visual Studio Code:

افتح ملف settings.json وأضف الإعداد التالي:

"flutter.hotReloadOnSave": true

في Android Studio:

انتقل إلى File > Settings > Languages & Frameworks > Flutter.

تأكد من تفعيل خيار Hot Reload on Save.

استخدام Hot Restart عند الحاجة:

إذا لاحظت أن Hot Reload لا يعمل كما هو متوقع، يمكنك استخدام Hot Restart لإعادة تشغيل التطبيق مع الحفاظ على الحالة الحالية.

في Visual Studio Code، اضغط Ctrl + F5 أو Command + F5.

في Android Studio، قم بالنقر على زر Hot Restart في شريط الأدوات.

تفعيل Hot Reload عند الحفظ في Flutter يُعد أمرًا بسيط إذا تم اتباع الإعدادات الصحيحة في بيئة التطوير. باتباع الخطوات المذكورة أعلاه، يمكنك فحص التغييرات التي تقوم بتجربتها على الكود الخاص بك والتي يتم تطبيقها تلقائيًا دون الحاجة إلى إعادة تشغيل التطبيق يدويًا. وهذا يساعد على تحسين كفاءة العمل وتجربة التطوير بشكل عام.