By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: التنقل بين الصفحات في فلاتر: Navigation & Routing
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Tutorials > التنقل بين الصفحات في فلاتر: Navigation & Routing
Tutorials

التنقل بين الصفحات في فلاتر: Navigation & Routing

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 5 دقيقة للقراءة 6 مشاهدات 7 1
شارك
التنقل بين الصفحات في فلاتر: Navigation & Routing
التنقل بين الصفحات في فلاتر: Navigation & Routing
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

Flutter هو إطار عمل تطبيقات متعددة المنصات يستخدم لتطوير تطبيقات الجوال والويب وسطح المكتب باستخدام لغة برمجة Dart. يتميز Flutter بسرعة التطوير والأداء العالي وسهولة الصيانة.

المحتويات
تحديد الصفحات باستخدام MaterialAppالتنقل باستخدام Navigatorالانتقال إلى الصفحات مع البياناتاستخدام MaterialPageRoute في Flutterمراقبة التنقل بواسطة onGenerateRoute

إذا كنت تطوّر تطبيقًا في Flutter، فمن المهم جدًا أن تتعلم كيفية تحويل المستخدمين من صفحة إلى أخرى باستخدام نظام التنقل والتوجيه (Navigation & Routing) المتاح في Flutter. يتيح لك هذا النظام تحويل المستخدمين إلى الصفحات المناسبة، وتحميل البيانات اللازمة في كل صفحة، وإرجاع البيانات المسجلة بعد الانتهاء من الصفحة.


تحديد الصفحات باستخدام MaterialApp

لتعيين المظهر العام لتطبيقك وتحديد الصفحات الرئيسية والمتاحة في التطبيق، يتم استخدام عنصر واجهة المستخدم MaterialApp. يمكنك تحديد الصفحة الرئيسية باستخدام خاصية home، وتحديد الصفحات المتاحة باستخدام خاصية routes.

MaterialApp(
  home: HomePage(),
  routes: {
    '/page1': (context) => Page1(),
    '/page2': (context) => Page2(),
  },
)

في المثال أعلاه، تم استخدام MaterialApp لتعيين صفحة HomePage كصفحة رئيسية، وتحديد Page1 و Page2 كصفحات متاحة في التطبيق. تذكر أن الصفحات المعرفة في routes يمكن استخدامها للانتقال بين الصفحات باستخدام Navigator.

“اقرأ أيضاً: شرح استخدام ويدجت PopupMenuButton في فلاتر“


التنقل باستخدام Navigator

Navigator هو عنصر واجهة مستخدم يستخدم لتحويل المستخدمين بين الصفحات. يمكنك استخدام Navigator للانتقال إلى صفحة جديدة باستخدام اسم الصفحة المعينة في خصائص routes في MaterialApp.

Navigator.pushNamed(context, '/page1');

في المثال أعلاه، تم استخدام Navigator للانتقال إلى Page1 باستخدام اسم الصفحة /page1. يمكنك استخدام Navigator.pop() للعودة إلى الصفحة السابقة.

يمكنك استخدام Navigator.pushReplacementNamed() للانتقال إلى صفحة جديدة وإزالة الصفحة الحالية من سجل الصفحات.

Navigator.pushReplacementNamed(context, '/page2');

“اقرأ أيضاً: شرح استخدام ويدجت AnimatedBuilder في فلاتر“


الانتقال إلى الصفحات مع البيانات

يمكنك إرسال البيانات من صفحة إلى أخرى باستخدام البيانات المسجلة في Navigator. يمكنك استخدام Navigator.pushNamed مع خاصية arguments لإرسال البيانات إلى الصفحة الجديدة.

Navigator.pushNamed(context, '/page1', arguments: data);

في المثال أعلاه، تم إرسال data إلى Page1 باستخدام Navigator.pushNamed. يمكنك استخدام ModalRoute.of(context).settings.arguments لاسترداد البيانات المرسلة من الصفحة السابقة.

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = ModalRoute.of(context).settings.arguments;
    // استخدم البيانات هنا
    return Scaffold(
      // ...
    );
  }
}

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“


استخدام MaterialPageRoute في Flutter

يعتبر MaterialPageRoute هو النوع الأكثر استخدامًا من التنقل بين الصفحات في Flutter. يمكن استخدامه لتنفيذ عملية التنقل التقليدية بين الصفحات وتحديد عنوان URL لكل صفحة. يمكن استخدام Navigator.push مع MaterialPageRoute للانتقال إلى صفحة جديدة.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

في المثال أعلاه، تم استخدام MaterialPageRoute للانتقال إلى SecondScreen. يتم تمرير وظيفة builder كمعامل إلى MaterialPageRoute، والتي تقوم بإنشاء SecondScreen وإعادتها. بمجرد الانتهاء من SecondScreen، سيتم إرجاع البيانات المسجلة إلى الصفحة السابقة باستخدام Navigator.pop.

Navigator.pop(context, result);

يمكن استخدام Navigator.pushNamed بدلاً من Navigator.push لتحديد اسم الصفحة المعينة عوضًا عن إنشاء MaterialPageRoute بشكل صريح.

Navigator.pushNamed(context, '/second');

في المثال أعلاه، تم استخدام Navigator.pushNamed للانتقال إلى الصفحة المسماة /second. يجب تعريف /second في MaterialApp باستخدام خاصية routes كما وضحنا بالأعلى.

MaterialApp(
  title: 'Flutter Navigation',
  initialRoute: '/',
  routes: {
    '/': (context) => FirstScreen(),
    '/second': (context) => SecondScreen(),
  },
);

“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“


مراقبة التنقل بواسطة onGenerateRoute

يمكن استخدام onGenerateRoute في MaterialApp لمراقبة عمليات التنقل التي تتم في التطبيق. يمكن استخدامه لتحديد صفحة معينة بناءً على الاسم المحدد في Navigator.pushNamed.

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/second') {
      return MaterialPageRoute(builder: (context) => SecondScreen());
    }
  },
);

في المثال أعلاه، تم استخدام onGenerateRoute لتحديد صفحة SecondScreen() إذا تم تحديد الاسم /second في Navigator.pushNamed. إذا كان الاسم غير موجود، يمكن إرجاع null لمنع التنقل إلى الصفحة المحددة.

“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“


تعتبر المفاهيم الأساسية لنظام التنقل والتوجيه في Flutter أساسية لتطوير تطبيقات عالية الأداء وسهلة الصيانة. ويمكن استخدام MaterialPageRoute لتنفيذ عملية التنقل التقليدية بين الصفحات، ويمكن استخدام Navigator.pushNamed لتحديد اسم الصفحة المطلوبة بدلاً من إنشاء MaterialPageRoute بشكل صريح. يمكنك أيضًا إرسال البيانات من صفحة إلى أخرى باستخدام Navigator.pushNamed مع خاصية arguments.ويمكن استخدام onGenerateRoute لمراقبة العمليات التي تتم في التنقل وتحديد الصفحة المناسبة بناءً على الاسم المحدد في Navigator.pushNamed. باستخدام هذه الأساليب، يمكنك تحسين تجربة المستخدم في تطبيقك وتحويله بسلاسة بين الصفحات وتحقيق تجربة مستخدم سلسة وفعالة في التطبيقات.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
طريقة انشاء المجلدات باستخدام Dart
Tutorials

طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا

11
خطة لاحتراف تطوير التطبيقات باستخدام Flutter في 60 يوم
Tutorials

خطة لاحتراف تطوير التطبيقات باستخدام Flutter في 60 يوم

17
10 تمارين محلولة على لغة دارت Dart الجزء السادس 2024
Tutorials

10 تمارين محلولة على لغة دارت Dart الجزء السادس 2024

4
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟