التنقّل والتوجيه بمرونة Navigation & Adaptive Overlays

في Flutter، التنقل بيعتمد على مفهوم الـ Stack (العامود). لما تفتح شاشة جديدة، إنت بتحطها "فوق" الشاشة الحالية. ولما ترجع، بتشيلها من فوق.

In Flutter, navigation is based on the Stack concept. When you open a new screen, you "push" it on top of the current one. When you go back, you "pop" it off.

المشكلة الكبيرة في Flutter هي إنك دايماً محتاج BuildContext عشان تتنقل. طيب لو إحنا جوه خدمة (Service) أو SnackBar Helper وعاوزين نفتح شاشة؟ الحل هو GlobalKey<NavigatorState>.

static final navigatorKey = GlobalKey();

// دلوقتي نقدر نستخدمه من أي مكان:
navigatorKey.currentState?.pushNamed('/login');

إحنا ربطنا المفتاح ده بـ MaterialApp في ملف main.dart عشان يكون هو "الريموت كنترول" بتاع التطبيق كله.

التطبيق مش دايماً بيفتح على الـ Dashboard. فيه "بوابات" لازم المستخدم يعدي عليها بالترتيب:

home: prefs.isPrivacyAccepted
    ? (settings.isBiometricEnabled
          ? const AuthGuardScreen()
          : const MainScreen())
    : const PrivacyConsentScreen(),

في الـ MRE CashBook، إحنا مهتمين جداً إن شكل القوائم (Dialogs/Sheets) يكون مريح. على الموبايل بتظهر من تحت (Bottom Sheet)، وعلى التابلت بتظهر في نص الشاشة (Dialog).

static Future showAdaptiveModal(BuildContext context, {required Widget child}) {
  if (ResponsiveLayout.isMobile(context)) {
    return _showMobileSheet(context, child: child);
  }
  return _showDesktopDialog(context, child: child);
}

لما بننتقل لشاشة تفاصيل كتاب معين، لازم نبعت معانا "الشنطة" اللي فيها بيانات الكتاب ده. إزاي بنعمل كدة في الـ 1.0؟

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => BookDetailsScreen(book: currentBook),
    settings: const RouteSettings(name: '/book-details'),
  ),
);

لاحظ إننا استخدمنا الـ Constructor بتاع الشاشة مباشرة. دي أسهل وأأمن طريقة (Type-Safe) عشان تتأكد إن الشاشة استلمت الـ Object الصح.

تخيل إنت بتكتب عملية حسابية طويلة، وفجأة دوست "رجوع" بالغلط. في MRE CashBook، بنستخدم PopScope (البديل الحديث لـ WillPopScope) عشان نمنع الكارثة دي.

return PopScope(
  canPop: false, // بنقفل الرجوع التلقائي
  onPopInvokedWithResult: (didPop, result) async {
    if (didPop) return;
    final shouldPop = await _showConfirmExitDialog();
    if (shouldPop && context.mounted) {
      Navigator.of(context).pop();
    }
  },
  child: Scaffold(...),
);

دي حركة احترافية جداً بتخلي المستخدم يتأكد إنه مش هيخسر بياناته اللي لسه معملهاش Save.

أحياناً إنت بتبعت المستخدم يختار حاجة من شاشة تانية (زي الـ Date Picker أو الـ Category). لما بيرجع، لازم يرجع ومعاه "الهدية".

// في الشاشة اللي بنختار منها
Navigator.pop(context, selectedCategory);

// في الشاشة الأصلية اللي مستنية
final result = await Navigator.push(context, route);
if (result != null) {
  _updateUI(result);
}

ده بيخلي التواصل بين الشاشات شغال في الاتجاهين (Two-way Communication).

في MRE CashBook، إحنا مش بس بنغير حجم الـ Container، إحنا بنغير "طريقة التنقل" نفسها بناءً على حجم الشاشة.

Scaffold(
  body: Row(
    children: [
      if (!ResponsiveLayout.isMobile(context))
        const AppNavigationRail(), // الشريط الجانبي للتابلت
      const Expanded(child: MainView()),
    ],
  ),
  bottomNavigationBar: ResponsiveLayout.isMobile(context)
      ? const AppBottomNavigationBar() // الشريط السفلي للموبايل
      : null,
);

ده بيخلي التطبيق يبدو كأنه تطبيق تابلت "حقيقي" مش مجرد تطبيق موبايل "ممطوط".

التنقل الناشف بيخلي التطبيق يحسسك إنه "قديم". إحنا بنستخدم الـ Hero عشان البيانات "تطير" من شاشة للتانية.

// في شاشة القائمة
Hero(
  tag: 'book-${book.id}',
  child: BookIcon(book),
);

// في شاشة التفاصيل
Hero(
  tag: 'book-${book.id}',
  child: LargeBookIcon(book),
);

بمجرد ما تستخدم نفس الـ tag، فلاتر بيكلف نفسه إنه يعمل أنيميشن ناعم جداً يحسس المستخدم إن الشاشة بتكبر مش بتبدل.

عشان متتوهش في المصطلحات، دي أهم الكلمات اللي هتقابلك:

• Stack: نظام "العامود" اللي مبني عليه التنقل (آخر حاجة تدخل هي أول حاجة تخرج).
• Route: هو الرابط أو المسار اللي بيوصل لشاشة معينة.
• Push: عملية إضافة شاشة جديدة فوق العامود.
• Pop: عملية إزالة الشاشة الحالية والرجوع للي تحتها.
• Arguments: البيانات اللي بنبعتها من شاشة للتانية.
• Navigator Key: ريموت كنترول بيخلينا نتحكم في التنقل من بره الـ Widgets.
• Adaptive: واجهة بتغير شكلها (Dialog vs Sheet) بناءً على الجهاز.

صمم مسار التنقل للحالة دي:

دي الخلاصة اللي هتحتاجها وأنت بتبني أي شاشة جديدة:

مفيش مبرمج مهربش من الـ Errors دي:

 [ Start App ] ──▶ [ Privacy Consent ] (if new)
       │
       ▼
 [ Auth Guard ] ◀── [ Biometrics ] (if enabled)
       │
       ▼
 [ Main Screen ] ──┬──▶ [ Dashboard ]
                   ├──▶ [ Entries ] ──▶ [ Entry Details ]
                   ├──▶ [ Books ] ──▶ [ Book Details ]
                   └──▶ [ Settings ] ──▶ [ Privacy Policy ]
        

التدفق ده بيضمن إن المستخدم بيمشي في مسار منطقي وآمن من أول ما يفتح التطبيق لغاية ما يوصل لبياناته.

اتأكد إنك فهمت النقاط دي قبل ما تنقل للفصل الجاي:

• بنعرف نستخدم الـ GlobalKey للتنقل بدون context.
• بنعرف الفرق بين الـ push والـ pushReplacement.
• فهمنا إزاي الـ AdaptiveOverlays بيغير شكله على التابلت والموبايل.
• اتعلمنا إزاي نبعت بيانات ونستلم نتايج من الشاشات.
• عرفنا إزاي نستخدم PopScope لحماية بيانات المستخدم.

التنقل السلس والواجهة المرنة هما الفرق بين تطبيق "شغال" وتطبيق "احترافي".