حل مشكلة إعادة تحميل الصفحات في Flutter

حل مشكلة إعادة تحميل الصفحات في Flutter داخل TabBarView و PageView​

لو بتطوّر تطبيق باستخدام Flutter وبتستخدم TabBarView أو PageView، أكيد لاحظت سلوك غريب شوية 🤔
كل ما تنتقل بين التابات، الصفحة القديمة بتتمسح وتتعمل من جديد!
النتيجة؟

• بطء في الأداء ⏳
• إعادة تحميل الداتا بدون داعي
• فقدان الـ State (زي الفورم أو العداد)

في البوست ده هنعرف السبب + الحل الاحترافي اللي بيستخدمه أي Flutter Developer 👇

ليه Flutter بيمسح الصفحات من الذاكرة؟​

بشكل افتراضي، Flutter بيعمل Optimization للذاكرة 💡
فبيقرر إنه:

• يمسح الـ Widgets اللي مش ظاهرة
• يعيد بنائها لما ترجع لها

الهدف:​

تقليل استهلاك الذاكرة

لكن المشكلة:​

في تطبيقات كتير، ده بيأثر بالسلب:

• API calls بتتكرر
• البيانات بتتحمل من جديد
• تجربة المستخدم بتبقى أسوأ

---

الحل: استخدام AutomaticKeepAliveClientMixin​

Flutter بيوفرلك حل بسيط وفعال جدًا 👌
وهو استخدام: AutomaticKeepAliveClientMixin
الميكسين ده بيخلي الصفحة تفضل موجودة في الذاكرة حتى لو خرجت منها.

---

مثال عملي للحل في Flutter​

تطبيق فيه TabBarView مع صفحتين:​

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Text("AutomaticKeepAlive Example"),
            bottom: const TabBar(
              tabs: [
                Tab(text: "Tab 1"),
                Tab(text: "Tab 2"),
              ],
            ),
          ),
          body: const TabBarView(
            children: [
              CounterPage(),
              CounterPage(),
            ],
          ),
        ),
      ),
    );
  }
}

تفعيل الاحتفاظ بالصفحة باستخدام KeepAlive​

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage>
    with AutomaticKeepAliveClientMixin {

  int counter = 0;

  @override
  bool get wantKeepAlive => true; // 👈 تفعيل الاحتفاظ

  @override
  Widget build(BuildContext context) {
    super.build(context); // مهم جدًا

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("القيمة: $counter",
              style: const TextStyle(fontSize: 22)),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            child: const Text("زيادة العداد"),
          ),
        ],
      ),
    );
  }
}

الفرق قبل وبعد استخدام AutomaticKeepAliveClientMixin​

بدون استخدامه:​

• كل ما تغيّر Tab
• الصفحة بتتعمل من جديد
• العداد بيرجع = 0 ❌

باستخدامه:​

• الصفحة بتفضل محفوظة في الذاكرة
• مفيش إعادة تحميل
• العداد يفضل زي ما هو ✅

---

متى تستخدم AutomaticKeepAliveClientMixin؟​

استخدمه في الحالات دي 👇

• صفحات فيها API calls
• شاشات فيها Forms
• Tabs فيها State مهم
• تطبيقات فيها real-time data

متستخدموش لما:​

• الصفحة بسيطة جدًا
• مفيش State مهم
• عايز توفر أقصى استهلاك للذاكرة

---

أفضل ممارسات لتحسين الأداء في Flutter​

عشان تحقق أفضل Performance في Flutter:

• استخدم KeepAlive بذكاء 🧠
• متخليش كل الصفحات محفوظة بدون داعي
• اعتمد على Lazy Loading
• راقب الأداء باستخدام Flutter DevTools
• قلل إعادة بناء الـ Widgets

---

الخلاصة​

Flutter بيدير الذاكرة بشكل ذكي… لكن مش دايمًا مناسب لكل الحالات 💡
لو عندك صفحات فيها بيانات أو State مهم:
الحل هو AutomaticKeepAliveClientMixin 👌
بيوفر لك:

• أداء أسرع 🚀
• تجربة مستخدم أفضل
• تقليل استهلاك الموارد

استخدمه صح… وهتلاحظ فرق كبير في تطبيقك 👍