Routes

📌 ما هي الـ Routes؟
  • Route في Flutter = تمثل “شاشة” أو “صفحة” داخل التطبيق.
  • Flutter يضع الـ Routes في stack (مكدس)، ويتعامل معها عبر Navigator:
    • push = دفع Route جديدة فوق المكدس.
    • pop = إزالة Route العلوية.
  • ممكن تعرّف Routes بشكل صريح (كائن MaterialPageRoute) أو بشكل مسمّى (named routes).
🟢 1) الـ Route العادي (MaterialPageRoute / CupertinoPageRoute)

أبسط طريقة:

Navigator.of(context).push(
  MaterialPageRoute(builder: (_) => const DetailsPage()),
);
Dart
  • MaterialPageRoute يعطيك انتقال بأسلوب Material Design (Android).
  • CupertinoPageRoute يعطيك انتقال بأسلوب iOS.
🟢 2) الـ Named Routes (المسارات المسمّاة)

بدل ما تبني Route في كل مرّة، تعرّفها في مكان واحد (عادةً داخل MaterialApp).

تعريف:
MaterialApp(
  initialRoute: '/', // المسار الأول عند التشغيل
  routes: {
    '/': (_) => const HomePage(),
    '/details': (_) => const DetailsPage(),
    '/settings': (_) => const SettingsPage(),
  },
);
Dart
استخدام:
Navigator.pushNamed(context, '/details');
Navigator.pop(context); // يرجع للصفحة السابقة
Dart
🟢 3) تمرير بيانات عبر Named Routes
الإرسال:
Navigator.pushNamed(
  context,
  '/details',
  arguments: 42, // أي نوع (int, String, Map...)
);
Dart
الاستقبال داخل الصفحة:
@override
Widget build(BuildContext context) {
  final id = ModalRoute.of(context)!.settings.arguments as int;
  return Text('Details for item $id');
}
Dart
🟢 4) onGenerateRoute (مسارات ديناميكية / معالجة خاصة)

مفيدة لو عندك منطق مخصص أو مسارات غير معرفة مسبقًا.

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/details') {
      final id = settings.arguments as int;
      return MaterialPageRoute(
        builder: (_) => DetailsPage(id: id),
      );
    }
    return MaterialPageRoute(builder: (_) => const NotFoundPage());
  },
);
Dart
🟢 5) onUnknownRoute (صفحة fallback)

لو المستخدم حاول فتح Route غير موجودة:

MaterialApp(
  onUnknownRoute: (_) => MaterialPageRoute(
    builder: (_) => const NotFoundPage(),
  ),
);
Dart
🟢 6) الفرق بين Routes / Navigator.push / pushReplacement
  • Route = تعريف الشاشة (صفحة).
  • Navigator.push(Route) = تفتح صفحة جديدة وتترك السابقة في الخلفية.
  • Navigator.pushNamed(‘/path’) = نفس الفكرة لكن تستخدم اسم بدل Route كائن.
  • Navigator.pushReplacement… = تفتح جديدة وتزيل الحالية.
🟢 7) مثال عملي كامل مع Routes
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(
      initialRoute: '/',
      routes: {
        '/': (_) => const HomePage(),
        '/details': (_) => const DetailsPage(),
      },
      onUnknownRoute: (_) =>
          MaterialPageRoute(builder: (_) => const NotFoundPage()),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/details', arguments: 'كتاب Flutter');
          },
          child: const Text('اذهب إلى التفاصيل'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});
  @override
  Widget build(BuildContext context) {
    final arg = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: Center(child: Text('تفاصيل: $arg')),
    );
  }
}

class NotFoundPage extends StatelessWidget {
  const NotFoundPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('404')),
      body: const Center(child: Text('الصفحة غير موجودة')),
    );
  }
}
Dart
📌 متى أستخدم أي أسلوب؟
  • push + MaterialPageRoute → مناسب لمشاريع صغيرة / تنقلات بسيطة.
  • Named routes → مناسب لو المشروع متوسط أو كبير وفيه شاشات كثيرة، عشان ترتبها كلها بمكان واحد.
  • onGenerateRoute → لما تحتاج تمرير بيانات بشكل مخصص أو تعمل منطق (مثل: إذا مستخدم غير مسجّل → يروح لـ Login).
  • onUnknownRoute → لحماية المستخدم من أخطاء المسارات (صفحة 404).