في هذا المقال، سنتحدث عن التوجيه والتنقل في تطبيقات Flutter وكيفية استخدامهما بشكل فعال. سنستعرض أنواع التوجيه المختلفة في Flutter ونقدم نصائح وأفضل الممارسات لتحسين تجربة المستخدم وتنظيم التطبيق الخاص بك.
ما هو التوجيه في Flutter؟
التوجيه هو عملية التنقل بين الصفحات أو الشاشات المختلفة داخل تطبيق Flutter. يعد التوجيه جزءًا أساسيًا من أداء التطبيق حيث يؤثر مباشرة على تجربة المستخدم. يتم إدارة التوجيه في Flutter باستخدام فئة Navigator، والتي تعتبر جزءًا من فئة WidgetsApp وعادة ما يتم توفيرها من خلال عنصري MaterialApp أو CupertinoApp. يدير Navigator المسارات باستخدام مكدس (Last In, First Out - LIFO)، مما يعني أن المسار الجديد يتم دفعه إلى المكدس عند التنقل إلى صفحة جديدة. عندما ترغب في العودة، يتم إخراج المسار الحالي من المكدس لكشف المسار السابق.
لماذا نستخدم التوجيه في Flutter؟
نستخدم التوجيه في Flutter للتنقل بين الشاشات أو الصفحات المختلفة في التطبيق. إنه ضروري لتوفير تدفق منطقي والحفاظ على حالة التطبيق عند التنقل من شاشة إلى أخرى. يمكن للمستخدمين العودة إلى الشاشات السابقة وتبادل البيانات بين الشاشات باستخدام التوجيه في Flutter.
Flutter Navigator
Navigator هو عنصر واجهة المستخدم في Flutter الذي يتحكم في إدارة مجموعة من كائنات المسار (Route) ويسهل التنقل بين الشاشات. يمكنك التفكير فيه على أنه مكدس بيانات يمكنك دفع مسارات جديدة إليه وإخراج المسارات الموجودة منه.
للانتقال إلى شاشة جديدة، يمكنك استخدام الطريقة Navigator.push(). تقوم هذه الطريقة بدفع مسار جديد إلى المكدس والانتقال إليه. على سبيل المثال:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);كيفية القيام بالتوجيه في Flutter
هناك طريقتان رئيسيتان للتوجيه في Flutter: التوجيه الأساسي (أو التوجيه بالمكدس) والتوجيه بالأسماء. دعنا نتعمق في كل نوع بالتفصيل:
التوجيه الأساسي (التوجيه بالمكدس)
التوجيه بالمكدس، أو التوجيه الأساسي كما يُعرف أحيانًا، هو النهج الأبسط للتنقل في Flutter. ينطوي هذا النهج على استخدام طرق الدفع والإخراج في Navigator لإضافة أو إزالة المسارات (الشاشات) من المكدس.
الدفع: عندما ترغب في الانتقال من شاشة إلى أخرى، يتم "دفع" مسار جديد إلى المكدس الخاص بـ Navigator. يصبح هذا المسار الجديد نشطًا ويتم عرض الشاشة المرتبطة به. فيما يلي مثال:
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);في هذا المثال، MaterialPageRoute هو مسار يستخدم انتقالًا متكيفًا مع المنصة. وهو شائع في تطبيقات Android و iOS.
الإخراج: يجب عليك "إخراج" المسار الحالي من المكدس الخاص بـ Navigator في حالة رغبتك في العودة إلى الشاشة السابقة وإغلاق الشاشة الحالية. فيما يلي كيفية القيام بذلك:
Navigator.pop(context);عند استدعاء 'pop'، يتم إزالة العنصر الأعلى، أي المسار الحالي في المكدس، ويصبح المسار السابق نشطًا مرة أخرى.
التوجيه بالأسماء
هو شكل آخر من أشكال التنقل يجعل من السهل إدارة المسارات في تطبيقات أكبر حجمًا. يتيح لك التوجيه بالأسماء الإشارة إلى المسارات باستخدام معرفات سلسلة محددة مسبقًا (أو "أسماء") بدلاً من التعامل المباشر مع المسارات نفسها.
في التوجيه بالأسماء، يصبح التنقل مسألة استدعاء 'Navigator.pushNamed()'، وتمرير اسم المسار الذي ترغب في التنقل إليه.
على سبيل المثال، للانتقال إلى شاشة التفاصيل، يمكنك القيام بالتالي:
Navigator.pushNamed(context, '/details');وبالنسبة للعودة إلى الشاشة السابقة، يجب عليك إخراج المسار الحالي تمامًا كما في التوجيه الأساسي:
Navigator.pop(context);تمرير الوسائط إلى المسارات المسماة
في تطبيق Flutter، قد ترغب في مشاركة البيانات من شاشة إلى أخرى. يُشار إلى ذلك في كثير من الأحيان بـ "تمرير الوسائط" إلى المسار. فيما يلي كيفية القيام بذلك:
تعريف المسارات: أولاً، يجب عليك إبلاغ Flutter عن "المسارات" الخاصة بك. يحتاج كل مسار إلى اسم.