Flutter Mobile Development · درس

المسارات المسمّاة والوسائط

استخدم المسارات المسمّاة لتنظيم التنقل وتمرير البيانات بين الشاشات باستخدام وسائط المسارات بفعالية

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

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

Why Named Routes?

In previous lessons, we used MaterialPageRoute for navigation. While effective for simple apps, managing many routes this way can get messy.

Each route requires a new MaterialPageRoute instance.
Harder to identify screens by a unique name.
Can lead to repetitive code.

Named routes offer a cleaner, more structured way to manage your app's navigation.

Defining Named Routes

To use named routes, you define them in your MaterialApp widget. This is done using the routes property.

The routes property takes a Map.
The key is the route's name (a String, e.g., '/details').
The value is a function that builds the widget for that route.

The '/' route is special; it's your app's initial route.

Navigating to Named Routes

Once named routes are defined, you can navigate to them using Navigator.pushNamed(). This method takes the BuildContext and the name of the route.

It's simpler and more readable than creating a new MaterialPageRoute every time you want to go to a specific screen.

Basic Named Route Demo

Let's see how to set up and navigate using named routes. We'll create two simple screens: HomeScreen and DetailScreen.

Tap the 'Run' button to see it in action!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Text('You are on the Detail Screen!',
          style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

Why Pass Arguments?

Often, when navigating to a new screen, you need to pass some data to it. For example:

A product ID to a product detail page.
User details to a profile editing screen.
A message to a confirmation page.

Route arguments allow you to send this information along with your navigation request.

Sending Arguments

You can pass arguments to a named route by using the arguments property in Navigator.pushNamed().

The arguments property accepts any Object.
It's best practice to pass simple data types (like String, int) or a custom class/map that encapsulates your data.

For example: Navigator.pushNamed(context, '/details', arguments: 'Hello from Home!');

Receiving Arguments

In the destination screen, you can retrieve the arguments using ModalRoute.of(context)!.settings.arguments.

ModalRoute.of(context) gets the current route.
.settings accesses the route's settings.
.arguments retrieves the data that was passed.

Remember to use ! for null safety if you're sure arguments will be present, or handle potential null values.

Type Safety & Casting

The .arguments property returns an Object?. This means you'll usually need to cast it to the expected type.

For example, if you passed a String, you'd retrieve it like this:

final String message = ModalRoute.of(context)!.settings.arguments as String;

It's good practice to add checks (e.g., if (arguments is String)) for robustness, especially with complex argument types.

Named Routes with Arguments Demo

This example demonstrates passing a simple String message from the HomeScreen to the DetailScreen using named routes and arguments.

The DetailScreen then displays this message.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes with Args',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details with Message'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/details',
              arguments: 'Hello from Home Screen!',
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String? message = 
        ModalRoute.of(context)!.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You are on the Detail Screen!',
              style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            Text('Message: ${message ?? "No message received"}',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

Quick Check: Arguments

You've navigated to a named route called '/settings' and passed a boolean value true as an argument. How would you correctly retrieve and use this boolean in the SettingsScreen widget?

Recap: Named Routes & Arguments

Great job! You've learned how to streamline navigation and pass data efficiently.

Named Routes: Use routes in MaterialApp to define routes with unique string names.
Navigation: Use Navigator.pushNamed(context, '/routeName') for cleaner navigation.
Passing Arguments: Use the arguments property in pushNamed to send data.
Receiving Arguments: Access data on the destination screen with ModalRoute.of(context)!.settings.arguments and cast it to the correct type.

This approach makes your app's navigation more organized and easier to maintain!

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

هل درس «المسارات المسمّاة والوسائط» مجاني؟

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

ماذا ستتعلم في «المسارات المسمّاة والوسائط»؟

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

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

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

كم من الوقت يستغرق درس «المسارات المسمّاة والوسائط»؟

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

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

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

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

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