شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا. هل تساءلت يومًا كيف تتعامل Flutter مع عشرات العمليات في الخلفية (مثل نقرات المستخدم وطلبات الـ API) دون أن تتجمد واجهة التطبيق؟ الإجابة تكمن في حلقة الأحداث (Event Loop) – وهي آلية ذكية تُنظم أولويات المهام لضمان سلاسة التطبيق. في هذا المقال، سنكشف هذه الآلية بأمثلة عملية، حتى تتمكن من تجنب الأخطاء الشائعة وتحسين أداء تطبيقاتك.

ما هي حلقة الأحداث الـ Event Loop في Flutter؟

هو نظام إدارة مهام في Dart (لغة Flutter):

• يستقبل الطلبات (المهام) ويوزعها على طابورين:
• طابور المهام الدقيقة (Microtask Queue): للمهام العاجلة (مثل تحديث واجهة فوري).
• طابور الأحداث العادية (Event Queue): للمهام الأقل إلحاحًا (مثل استجابة الشبكة وطلبات الـ API).

void main() {
  print('بداية البرنامج');

  // مهمة في طابور الأحداث العادية
  Future(() => print('حدث عادي'));

  // مهمة في طابور المهام الدقيقة
  scheduleMicrotask(() => print('مهمة دقيقة'));

  print('نهاية البرنامج');
}

النتيجة:

بداية البرنامج
نهاية البرنامج
مهمة دقيقة
حدث عادي

السبب: المهام الدقيقة تُنفَّذ دائمًا قبل الأحداث العادية.

“اقرأ أيضاً: شرح استخدام حزمة QuickAlert في Flutter“

آلية العمل خطوة بخطوة

1. التنفيذ التزامني: ينفذ الكود الأصلي (الغير معطّل) مباشرة.
2. المهام الدقيقة أولًا: تُنفذ جميع المهام في هذا الطابور حتى يُفرغ.
3. الأحداث العادية لاحقًا: تُنفذ مهمة واحدة من الطابور العادي، ثم تتكرر الدورة.

“اقرأ أيضاً: حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر“

أمثلة واقعية مع الكود Event Loop في Flutter

مثال 1: وهم التجميد!

void main() {
  // مهمة ثقيلة تستهلك الوقت (مثل معالجة بيانات)
  for (int i = 0; i < 1000000000; i++) {} 

  print('انتهت المهمة!'); // سيظهر بعد تأخير
}

المشكلة: التطبيق يتجمد حتى تنتهي الحلقة for.

الحل: استخدام Isolate لفصل المهمة:

import 'dart:isolate';

void main() async {
  print('بداية العملية...');

  await Isolate.run(() {
    for (int i = 0; i < 1000000000; i++) {} 
  });

  print('العملية انتهت دون تجميد!');
}

مثال 2: طلب شبكة دون تعطيل الواجهة

Future<void> fetchUserData() async {
  print('جاري التحميل...');
  await Future.delayed(Duration(seconds: 3)); // محاكاة طلب شبكة
  print('تم التحميل!');
}

void main() {
  fetchUserData();
  print('يمكنك النقر هنا أثناء الانتظار!'); // يظهر فورًا
}

النتيجة:

جاري التحميل...
يمكنك النقر هنا أثناء الانتظار!
تم التحميل! (بعد 3 ثوانٍ)

“اقرأ أيضاً: أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات“

نصائح ذهبية لجعل التطبيق لا يتوقف أبدًا

• تجنب العمليات المعقدة (مثل معالجة فيديو) مباشرة في الدوال الرئيسية مثل build().
• راقب الأداء بـ DevTools: اكتشف المهام البطيئة عبر Flutter Performance Tab.
• استخدم compute للمهام المتوسطة:

void processData() { /*...*/ }

void main() {
  compute(processData, null); // تشغيل في خلفية
}

أسئلة تُطرح دائمًا عن Event Loop في Flutter

هل Dart تدعم التعددية الحقيقية؟

لا، لكنها تستخدم Isolate (مهام معزولة بذاكرة منفصلة)، وهي مثالية لتجنب تجميد الواجهة.

كيف أعرف إذا كانت حلقة الـ events مثقلة؟

• إذا لاحظت تأخير في الاستجابة (مثل تأخر ظهور لوحة المفاتيح).
• استخدم Frame Rendering Graph في DevTools: إذا تجاوز الرسم 16ms/إطار، فهناك مشكلة في Event Loop في Flutter.

“اقرأ أيضاً: شرح الـ Map في لغة دارت (Map in Dart)“

فهم حلقة الأحداث الـ Event Loop في Flutter ليس مجرد نظرية، بل هو أساس لبناء تطبيقات Flutter سريعة. تذكر دائمًا:

• المهام الدقيقة سكين ذو حدين: استخدمها للمهام القصيرة فقط.
• الأساس ليس للعمليات الثقيلة: كل مهمة تستغرق أكثر من 16ms قد تُسبب تجميدًا.
• المراقبة المستمرة: استخدم أدوات المطورين كـ DevTools لاكتشاف المشاكل مبكرًا.

ابدأ بتطبيق هذه النصائح في مشروعك الحالي، ولاحظ الفرق في سلاسة الواجهة!