Flutter Search باستخدام RxDart وتحسين الأداء

لو بتبني ميزة Search في Flutter، غالبًا أول حل بييجي في بالك هو إرسال API Request مع كل حرف المستخدم بيكتبه 😅
لكن الحقيقة إن ده بيعمل مشاكل كبيرة:

• ضغط غير طبيعي على السيرفر
• استهلاك بيانات وبطارية
• UI بيهنج أو يبقى بطيء

الحل الذكي هنا؟ 👉 استخدام RxDart لتنظيم عملية البحث بشكل احترافي.

ليه RxDart هو الحل الأفضل للـ Search؟​

مكتبة RxDart بتديك أدوات قوية للتحكم في الـ Streams، وده بيساعدك تعمل:

• تقليل عدد الطلبات
• تحسين الأداء
• تجربة مستخدم سلسة

وبالذات لما تستخدم debounce + distinct 🔥

الفكرة الأساسية: بدل ما تبعت Request مع كل حرف​

بدل ما كل حرف يضرب Request…
هنخلي الكود "يستنى" شوية قبل التنفيذ، ويتأكد إن فيه تغيير حقيقي.

---

تطبيق عملي باستخدام PublishSubject​

final _searchSubject = PublishSubject<String>();

_searchSubject
    .debounceTime(Duration(milliseconds: 500))
    .distinct()
    .listen(_search);

---

شرح أهم الأجزاء​

⏱️ debounceTime (فرامل البحث)​

دي أهم خطوة 👇

• بتخلي الكود يستنى 500ms
• لو المستخدم لسه بيكتب → مفيش Request
• أول ما يوقف → يتم البحث

النتيجة؟ تقليل ضخم في عدد الـ API Calls ⚡

🔁 distinct (منع التكرار)​

بتمنع إرسال نفس الكلمة مرتين:

• لو المستخدم كتب نفس النص
• أو عدل ورجع لنفس الكلمة

➡️ مفيش Request جديد
وده بيحسن الأداء بشكل ملحوظ.

🎯 listen(_search)​

هنا بقى التنفيذ الفعلي:

• أول ما الشروط تتحقق
• الكلمة تتبعت للـ API

void _search(String query) {
  // Call API here
}

---

استخدام RxDart مع Cubit (أفضل تنظيم للكود)​

لما تدمج RxDart مع Cubit أو Bloc، بتحصل على:

• فصل كامل بين UI و Logic 🧠
• كود نظيف وسهل الصيانة
• تحكم كامل في حالة البحث

مثال بسيط:

void onSearchChanged(String query) {
  _searchSubject.add(query);
}

ليه الطريقة دي أفضل من onChanged العادية؟​

⚡ Performance أقوى​

• Requests أقل
• استهلاك بيانات أقل

📱 User Experience أفضل​

• مفيش Lag
• البحث سلس وسريع

🧼 Clean Code​

• الكود منظم
• الـ Logic منفصل عن UI

---

أهم نصيحة (تجنب Memory Leak)​

متنساش تقفل الـ Stream 👇

@override
Future<void> close() {
  _searchSubject.close();
  return super.close();
}

لو نسيت الخطوة دي… ممكن يحصل Memory Leak 😬

---

RxDart vs Timer: أيهم أفضل؟​

الطريقة	التقييم
Timer	بسيطة لكن محدودة
RxDart	قوية ومرنة وقابلة للتوسع

لو شغلك بسيط → Timer ممكن يكفي
لكن في التطبيقات الاحترافية → RxDart هو الأفضل 💪

---

نصائح احترافية لتحسين ميزة البحث​

• استخدم Pagination مع البحث
• اعرض Loading Indicator أثناء البحث
• اعمل Cache للنتائج
• امنع البحث لو النص فاضي

---

الخلاصة​

لو عايز تبني ميزة بحث احترافية في Flutter:

• بلاش تبعت Request مع كل حرف ❌
• استخدم RxDart + debounce + distinct ✅

هتحصل على:

• أداء أعلى 🚀
• استهلاك أقل ⚡
• تجربة مستخدم ممتازة 💯

وفي النهاية…
الميزة الصح مش اللي تشتغل وبس، لكن اللي تشتغل بكفاءة.