شرح Flutter Context ببساطة للمبتدئين

لو بدأت Flutter قريب، فغالبًا أكتر كلمة شوفتها ودوّختك هي context 🤔
المشكلة مش في الكلمة… المشكلة إن ناس كتير بتستخدمها من غير ما تفهمها.
ببساطة شديدة: الـ Context هو عنوان الـ Widget جوه شجرة الـ Widgets 🌳

🏢 تشبيه بسيط يخليك تفهم Context فورًا​

تخيّل إن التطبيق بتاعك عمارة كبيرة 🏢 كل Widget شقة جوه العمارة.
الـ Context بيقول لـ Flutter:
📍 أنا الـ Widget اللي في الدور التالت، الشقة اللي على اليمين
من غير العنوان ده، Flutter مش عارف إنت فين ولا يجيبلك حاجة.

---

🎯 ليه لازم تفهم الـ Context صح؟​

🎨 الوصول للـ Theme وحجم الشاشة​

لو محتاج:

• لون الثيم
• حجم الشاشة
• اتجاه الجهاز

كل ده بيتم عن طريق context 👇

final width = MediaQuery.of(context).size.width;
final color = Theme.of(context).primaryColor;

من غير Context؟
Flutter مش هيعرف يسأل “الأب الكبير” 🧠

---

🧭 الـ Navigation بين الصفحات​

وأنت بتتنقل من شاشة للتانية، Flutter لازم يعرف إنت واقف فين حاليًا.
وده مش هيحصل غير بالـ Context 👇

Navigator.of(context).push(
  MaterialPageRoute(builder: (_) => DetailsPage()),
);

📌 من غير Context = مفيش تنقّل.

---

❌ أشهر خطأ: Context مش موجود​

الـ Error الشهير اللي كلنا شفناه 😅 Looking up a deactivated widget's ancestor
السبب غالبًا:

• بتستخدم Context
• قبل ما الـ Widget يتبني
• أو بعد ما يتشال من الشجرة

يعني إنت بتنادي على عنوان بيت لسه متبناش 🏗️

---

⚠️ مثال على استخدام غلط للـ Context​

@override
void initState() {
  super.initState();
  Navigator.of(context).push(...); // ❌ غلط
}

ليه غلط؟
علشان الـ Context هنا لسه مش جاهز.

---

✅ الحل الصح​

استنى لما الـ Widget يتبني:

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // هنا context آمن
}

أو:

WidgetsBinding.instance.addPostFrameCallback((_) {
  Navigator.of(context).push(...);
});

---

🧠 الخلاصة اللي هتريح دماغك​

• Context مش object عادي
• Context = مكانك في شجرة الـ Widgets
• أي طلب:
  • Theme
  • MediaQuery
  • Navigator
    محتاج Context صح وفي الوقت الصح

📌 الدرس المهم: قبل ما تطلب حاجة، اسأل نفسك: أنا واقف فين؟
البرمجة مش كود وبس… دي فهم وترتيب أفكار 👌