Flutter Mobile Development · درس

التنقل الأساسي بين الصفحات

تعلّم دفع المسارات وإزالتها باستخدام Navigator، بما يتيح انتقالات بسيطة بين الشاشات المختلفة في تطبيق Flutter لديك

التنقل الأساسي بين الصفحات درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Navigating Your App

فكر في تطبيق الهاتف المحمول كمجموعة من الصفحات أو "الشاشات". التنقل هو الطريقة التي ينتقل بها المستخدمون بين هذه الشاشات، مثل الانتقال من قائمة المنتجات إلى صفحة تفاصيل المنتج.

تحتاج التطبيقات إلى طريقة واضحة للمضي قدمًا.
تحتاج التطبيقات أيضًا إلى طريقة للعودة.
يوفر Flutter أدوات قوية لهذا الغرض.

Meet the Navigator

In Flutter, the Navigator widget manages a stack of Route objects. When you want to show a new screen, you "push" a route onto this stack. When you want to go back, you "pop" a route off the stack.

It's like a stack of playing cards.
New cards go on top (push).
You remove cards from the top (pop).

Understanding Routes

A Route is an abstraction for a "screen" or "page" in your app. Flutter provides a common type of route called MaterialPageRoute, which creates a platform-specific transition animation (like sliding in from the right on Android).

It's the blueprint for how a new screen will look and behave when shown.

Moving Forward with push()

To navigate to a new screen, you use Navigator.push(). This method takes a BuildContext and a MaterialPageRoute as arguments.

The builder function inside MaterialPageRoute tells Flutter which widget to build for the new screen.

Try Pushing a Route

This example shows how to push a new screen when a button is pressed. Run it and tap the button!

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: const Center(
        child: Text('You are on the second screen!'),
      ),
    );
  }
}

What is BuildContext?

You might have noticed context being passed around. BuildContext is a handle to the location of a widget in the widget tree. It helps widgets locate other widgets or data higher up in the tree.

The Navigator uses this context to know which navigation stack to operate on.

Going Back with pop()

When you want to return to the previous screen, you "pop" the current route off the navigation stack using Navigator.pop(). This will reveal the screen that was underneath.

Flutter's AppBar often provides a back button automatically when a new route is pushed, which internally calls Navigator.pop().

Try Popping a Route

Let's modify our previous example to include a button on the second screen that allows us to explicitly go back to the home screen.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // This will go back!
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

Visualizing the Stack

Imagine the Navigator maintains a stack of screens. When you push, a new screen is placed on top. When you pop, the top screen is removed.

The user always sees the topmost screen. This stack behavior is fundamental to how navigation works in Flutter.

Push: Adds to top.
Pop: Removes from top.
First screen is at the bottom.

Navigation Check

Consider a Flutter app with two screens, ScreenA and ScreenB. If you are currently on ScreenA and want to move to ScreenB, then later return to ScreenA, which sequence of Navigator methods would you use?

Recap: Basic Navigation

Great job! You've learned the core concepts of basic navigation in Flutter:

The Navigator manages a stack of routes.
MaterialPageRoute defines a new screen.
Navigator.push() adds a new screen to the stack.
Navigator.pop() removes the current screen from the stack.
BuildContext is essential for navigation operations.

Next, we'll explore more advanced navigation techniques like named routes!

الأسئلة الشائعة

هل درس «التنقل الأساسي بين الصفحات» مجاني؟

نعم — نص درس «التنقل الأساسي بين الصفحات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

ماذا ستتعلم في «التنقل الأساسي بين الصفحات»؟

تعلّم دفع المسارات وإزالتها باستخدام Navigator، بما يتيح انتقالات بسيطة بين الشاشات المختلفة في تطبيق Flutter لديك تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟

لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «التنقل الأساسي بين الصفحات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟

نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Flutter Mobile Development