Navigator: ما هو، إدارة الشاشات في Flutter

ما هو Navigator في Flutter

Navigator هو أداة تدير مكدسًا من كائنات Route، وتنفذ التنقل بين الشاشات في تطبيق Flutter. كل استدعاء لـ push يضع Route جديدًا على قمة المكدس، و pop يزيل Route العلوي ويعود إلى الشاشة السابقة. يقوم MaterialApp تلقائيًا بإنشاء Navigator للتطبيق بأكمله، مما يجعله متاحًا عبر Navigator.of(context).

على عكس StatefulWidget، حيث يتم استبدال المحتوى عبر setState داخل أداة واحدة، يعمل Navigator مع شاشات كاملة لها دورة حياتها الخاصة. كل Route في المكدس هو حالة معزولة مع BuildContext الخاص به، مما يمنع تسرب الذاكرة ويبسط إدارة التبعيات. عند استدعاء pop، يتم تدمير Route غير المستخدم، مما يحرر الموارد.

وفقًا لدليل التنقل في Flutter (2026)، تطور Navigator من API أمرية (Navigator 1.0) إلى API تصريحية (Navigator 2.0). يستخدم Navigator 1.0 طرق push/pop مباشرة، وهو مناسب للسيناريوهات البسيطة. Navigator 2.0 (Router) مناسب للتطبيقات ذات الروابط العميقة والتنقل التكيفي والتوجيه عبر الويب.

كيف يعمل Navigator تحت الغطاء

داخليًا، يستخدم Navigator Overlay — أداة خاصة تعرض Routes واحدة فوق الأخرى. ينشئ كل Route موضعه الخاص في Overlay مع مؤشر z يتوافق مع عمقه في المكدس. وهذا يفسر لماذا عند استدعاء push، تظهر الشاشة الجديدة متحركة فوق الشاشة السابقة، وعند استدعاء pop، تكون الشاشة السابقة جاهزة للعرض: لم يتم تدميرها بل بقيت في Overlay أسفل الشاشة الجديدة.

للرسوم المتحركة للانتقال، يستخدم Navigator PageTransitionsTheme، والذي يمكن تجاوزه في ThemeData. يتم تعيين الرسوم المتحركة الخاصة بالمنصة عبر CupertinoPageRoute لنظام iOS (انزلاق من اليمين) و MaterialPageRoute لنظام Android (انزلاق من الأسفل). يختار Navigator تلقائيًا الرسوم المتحركة الصحيحة عند استخدام PlatformRoute.

طرق Navigator: push و pop و pushReplacement

يوفر Navigator مجموعة من الطرق لإدارة مكدس Routes. تحل كل طريقة مهمة تنقل محددة — من انتقال بسيط إلى استبدال كامل لتاريخ الشاشات. دعنا نستعرض الطرق الرئيسية مع أمثلة الاستخدام.

Push و Pop: العمليات الأساسية

تأخذ طريقة push Route وتُرجع Future بالنتيجة التي تم تمريرها أثناء pop. وهذا يسمح باستقبال البيانات من الشاشة التي تم التنقل إليها. على سبيل المثال، يمكن لشاشة اختيار التاريخ إرجاع DateTime عبر Navigator.pop(context, selectedDate). طريقة pop بدون وسائط تُرجع null، مع وسيطة — تمرر القيمة إلى الشاشة المستدعية.

PushReplacement: استبدال الشاشة

pushReplacement يستبدل Route الحالي بآخر جديد، ويزيل المسار الحالي من المكدس. هذا أمر بالغ الأهمية للسيناريوهات التي لا يجب أن يتمكن المستخدم فيها من العودة إلى الشاشة السابقة. مثال نموذجي — شاشة تسجيل الدخول: بعد تسجيل الدخول بنجاح، يتم استبدال الشاشة الحالية بالشاشة الرئيسية، ولا يعود زر الرجوع إلى نموذج تسجيل الدخول.

المسارات المسماة و onGenerateRoute

يدعم Navigator التنقل عبر المسارات المسماة باستخدام طريقة pushNamed. بدلاً من إنشاء Route مباشرة، يحدد المطور معرفًا نصيًا، ويقوم Navigator تلقائيًا بإنشاء Route بناءً على التكوين في MaterialApp. وهذا يبسط الكود ويتمركز تعريف المسارات في مكان واحد.

يتم تعريف المسارات المسماة من خلال خاصية routes في MaterialApp، حيث كل مفتاح هو سلسلة مسار والقيمة هي دالة تُرجع Widget. للمسارات الديناميكية (مع معاملات)، يتم استخدام onGenerateRoute — رد اتصال يستقبل RouteSettings ويُرجع Route. وهذا يسمح بتمرير الوسائط عبر معامل arguments وتنفيذ التنقل العميق.

وفقًا لـ Cookbook Flutter (2026)، يتم تمرير الوسائط عبر pushNamed باستخدام المعامل arguments: Object?. تستخرج الشاشة المستقبلة الوسائط عبر ModalRoute.of(context)!.settings.arguments، مما يوفر نقل بيانات آمن النوع دون متغيرات عامة أو InheritedWidget.

معالجة المسارات غير المعروفة

خاصية onUnknownRoute في MaterialApp تعالج الحالات التي يتم فيها استدعاء pushNamed بمسار غير موجود. هذا مفيد لعرض شاشة 404 أو إعادة التوجيه إلى الصفحة الرئيسية. بالاقتران مع onGenerateRoute، يضمن تغطية كاملة لجميع سيناريوهات التنقل الممكنة.

Navigator 2.0 والتنقل التصريحي باستخدام Router

Navigator 2.0 (المعروف أيضًا باسم API Router) هو نهج تصريحي للتنقل تم تقديمه في Flutter 2.0. على عكس Navigator 1.0 الأمري، حيث يستدعي المطور push/pop، يدير Router التنقل من خلال الحالة، مما يقوم تلقائيًا بمزامنة عنوان URL للمتصفح مع الشاشة الحالية. هذا مهم بشكل خاص لتطبيقات الويب وإصدارات سطح المكتب.

تتكون بنية Navigator 2.0 من ثلاثة مكونات رئيسية: RouteInformationParser يحلل URL إلى تكوين مسار، RouterDelegate يحول التكوين إلى قائمة من Routes، و BackButtonDispatcher يتعامل مع زر الرجوع في النظام. هذه البنية تجعل التنقل قابلاً للتنبؤ والاختبار تمامًا.

لتبسيط العمل مع Navigator 2.0، توجد حزم غلاف: go_router (موصى به من Google)، auto_route و beamer. يوفر go_router DSL تصريحيًا لتعريف المسارات مع دعم التنقل المتداخل وإعادة التوجيه والروابط العميقة دون تنفيذ RouterDelegate يدويًا. وفقًا لـ pub.dev (2026)، يتم استخدام go_router في 35% من مشاريع Flutter الجديدة التي تفضل النهج التصريحي.

مثال على التنقل في تطبيق Flutter

لننظر في مثال Navigator مع مسارات مسماة ونقل البيانات بين الشاشات. يوضح الكود شاشة قائمة المنتجات، والانتقال إلى شاشة التفاصيل، والعودة بنتيجة.

// Route configuration in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

في المثال، Navigator.pushNamed يمرر معرف المنتج إلى شاشة التفاصيل. عند العودة عبر Navigator.pop(context, updatedProduct)، تستقبل الشاشة المستدعية البيانات المحدثة في المتغير result. pushReplacementNamed يستبدل الشاشة الحالية بعد التفويض، و pushNamedAndRemoveUntil مع الشرط (route) => false يمسح المكدس بالكامل، مما يمنع العودة إلى الشاشات السابقة.