الطرق الحديثة للتنقل في Flutter: دليلك الشامل لـ GoRouter
لقد تطور نظام التنقل في Flutter بشكل كبير، متجاوزاً الاستدعاءات
الإجرائية القديمة مثل Navigator.push(). مع نمو التطبيقات، أصبحت إدارة تدفقات التنقل
المعقدة وتمثيل الحالة عبر عناوين URL أمراً حيوياً. وهنا يبرز GoRouter كأحدث حل
رسمي مدعوم من فريق Flutter، حيث يقدم مقاربة مُعلنة (Declarative)
وقائمة على عناوين URL لإدارة التوجيه.
GoRouter هي حزمة تنقل إعلانية (Declarative) مدعومة رسمياً من قبل فريق Flutter،
وتستخدم المسارات القائمة على عناوين URL (URLs) لإدارة التنقل بين الشاشات بدلاً من الاستدعاءات المباشرة.
تُعد ميزة الارتباط العميق (Deep Linking) المدمجة ومزامنة عناوين URL
من أبرز مزايا GoRouter، مما يجعلها مثالية لتطبيقات الويب (Web Apps)
وتطبيقات الأجهزة المحمولة التي تحتاج إلى التنقل عبر روابط خارجية.
لإدارة تدفقات المصادقة (Authentication Flows) في GoRouter، يتم استخدام
وظيفة redirect، والتي تسمح بإعادة توجيه المستخدم تلقائياً إلى صفحة تسجيل
الدخول إذا لم يكن مصادقاً (Authenticated).
لماذا GoRouter في Flutter ؟
قبل GoRouter، كان التنقل يعتمد على أسلوب إجرائي (Imperative):
حيث تخبر النظام بما يجب أن يفعله بالضبط (push صفحة معينة).
لكن GoRouter يتبع نهجاً مُعلناً (Declarative)، حيث تصف بنية التطبيق الكاملة،
ويقوم النظام بإجراء التنقلات اللازمة تلقائياً.
المزايا الرئيسية لاستخدام GoRouter
1- المقاربة المُعلنة (Declarative Approach) : يتم تحديد جميع المسارات (Routes)
بشكل مركزي عند التهيئة، مما يجعل تدفق التنقل واضحاً وسهل القراءة.
2- الارتباط العميق المدمج (Built-in Deep Linking) : تسمح هذه الميزة
بفتح التطبيق مباشرة على شاشة محددة بناءً على رابط خارجي (URL)، وهو أمر
ضروري لتطبيقات التجارة الإلكترونية أو الإشعارات.
3- مزامنة عناوين URL (URL Synchronization) : مثالية لتطبيقات Flutter Web،
حيث يتم تحديث شريط عنوان المتصفح تلقائياً ليعكس الشاشة الحالية.
4- مسارات شل للتنقل الثابت (Shell Routes) : يوفر GoRouter دعماً
قوياً لتنفيذ تصميمات الواجهة المعقدة مثل أشرطة التنقل السفلية (Bottom Navigation Bars) أو
القوائم الجانبية (Side Navigators) التي تبقى ثابتة أثناء التنقل بين المسارات الرئيسية.
5- إعادة التوجيه (Redirection) : تسمح هذه الميزة بالتحكم في الوصول إلى المسارات.
على سبيل المثال، التحقق من حالة المستخدم وإعادة توجيهه إلى صفحة تسجيل الدخول إذا لم يكن مسجلاً.
6- دعم معلمات المسار والاستعلام (Path and Query Parameters) :
يمكن تمرير البيانات بسهولة كجزء من عنوان URL، مثل /details/123 (معلمات المسار) أو
/products?category=shirts (معلمات الاستعلام).
كيفية عمل GoRouter
بدلاً من استدعاء Navigator.push(context, ...)، يتم تعريف المسارات باستخدام بنية هرمية تشبه الملفات :
Dart
final GoRouter router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/', // المسار الأساسي
builder: (BuildContext context, GoRouterState state) {
return HomeScreen();
},
routes: <RouteBase>[
GoRoute(
path: 'details/:id', // مسار فرعي مع معلمة
builder: (BuildContext context, GoRouterState state) {
final itemId = state.pathParameters['id'];
return DetailsScreen(itemId: itemId);
},
),
],
),
],
);
--
إدارة التنقل في GoRouter
يتم التنقل باستخدام أساليب واضحة ومحددة :
- للتنقل إلى مسار : context.go('/settings')
- للدفع فوق المسار الحالي : context.push('/new-page')
- للانتقال مع استبدال المسار الحالي (مثالي لصفحات تسجيل الدخول) :
context.replace('/home')
الحيل الحديثة المتقدمة في التنقل GoRouter
1. تدفق المصادقة باستخدام Redirect (إعادة التوجيه)
تُعد هذه الوظيفة حجر الزاوية في التنقل الحديث، حيث تضمن عدم قدرة المستخدم غير
المصادق على الوصول إلى صفحات معينة.
يتم تعريف وظيفة redirect في GoRouter للتحقق من حالة المصادقة :
Dart
GoRouter(
// ...
redirect: (BuildContext context, GoRouterState state) {
final isLoggedIn = authService.isLoggedIn;
final isLoggingIn = state.uri.path == '/login';
// إذا لم يكن مسجلاً والدخول إلى صفحة محمية، يتم التوجيه إلى تسجيل الدخول
if (!isLoggedIn) return isLoggingIn ? null : '/login';
// إذا كان مسجلاً ويحاول الوصول إلى صفحة تسجيل الدخول، يتم التوجيه إلى الرئيسية
if (isLoggedIn && isLoggingIn) return '/';
return null; // لا توجيه
},
// ...
);
--
2. التنقل الثابت باستخدام ShellRoute (مسارات الشل)
عندما يكون لديك شريط تنقل سفلي (BottomNavigationBar)،
يجب أن تبقى بقية الشاشة ثابتة.
ShellRoute يسمح لك بتغليف مجموعة من المسارات داخل واجهة مستخدم مشتركة
(مثل الـ Scaffold مع شريط التنقل).
عندما يتنقل المستخدم بين المسارات داخل الشل، يتم تبديل الشاشة الرئيسية فقط،
بينما يظل شريط التنقل ثابتاً في مكانه، مما يوفر تجربة سلسة تشبه التطبيقات الأصلية.
3. استخدام مسارات GoRouter كمقاطع في الويب (Segments)
في تطبيقات الويب، يسمح لك GoRouter بتعريف مسارات مختلفة تماماً بناءً على الشرائح.
يمكنك استخدام GoRoute لتحديد كل شريحة بشكل منفصل، مما يضمن أن كل مسار
له ملفه الشخصي الخاص به ومعلماته الخاصة، ويتم تحديث عنوان URL بشكل نظيف ومفهوم.
الخلاصة
إن الانتقال إلى نظام التنقل المُعلن والقائم على عناوين URL في Flutter
هو خطوة عملاقة نحو الأمام. GoRouter يوفر حلاً موثوقاً ومدعوماً رسمياً،
مما يسهل بشكل جذري تنفيذ ميزات معقدة مثل Flutter Deep Linking
وإدارة تدفقات المصادقة (Authentication Flows). إتقان GoRouter يعني
تبسيط قاعدة الكود لديك وضمان أن تطبيقك جاهز للتوسع ومناسب لتجربة الويب والمحمول معاً.
