الفصل الثامن : التنقل والتوجيه في Flutter: دليل شامل للمطور العربي

في عالم تطوير التطبيقات الجوالة والويب، يُعد التنقل والتوجيه أحد أهم العناصر التي تحدد نجاح التجربة المستخدم. مع Flutter، الإطار الشائع الذي طورته Google، يمكنك بناء تطبيقات سريعة وجذابة تتناسب مع أجهزة Android وiOS والويب. لكن، كيف يمكنك إدارة الانتقال بين الشاشات بكفاءة؟ في هذا الدليل الشامل، سنستعرض كل ما يتعلق بالتنقل في Flutter، من الأساسيات إلى التقنيات المتقدمة، مع أمثلة عملية ونصائح احترافية. سواء كنت مبتدئًا أو مطورًا محترفًا، ستجد هنا كل ما تحتاجه لتحسين تطبيقاتك.

مقدمة: التنقل والتوجيه.. عصب تجربة المستخدم في Flutter

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

ولفهم هذا النظام بعمق، من الضروري التمييز بين مفهومين رئيسيين:

• التنقل (Navigation): يشير إلى فعل الانتقال الفعلي من شاشة إلى أخرى. على سبيل المثال، عندما يضغط المستخدم على زر “تسجيل الدخول”، فإن هذا الفعل يمثل عملية “تنقل” من صفحة تسجيل الدخول إلى الصفحة الرئيسية. هو ببساطة العمل المباشر للتحويل من واجهة مستخدم إلى أخرى.
• التوجيه (Routing): يشير إلى تحديد المسار أو خريطة كيفية ربط الشاشات ببعضها البعض. إنه يمثل القواعد والتعريفات المسبقة التي تحدد المسارات المتاحة داخل التطبيق وكيفية الوصول إليها. هذا التوجيه هو الذي يخبر التطبيق أن الضغط على زر معين يجب أن يؤدي إلى الانتقال إلى مسار محدد مسبقًا.

هذا التمييز ليس مجرد مصطلح تقني؛ بل هو جوهر الفلسفة الكامنة وراء تطور نظام التنقل في Flutter. فبينما كان النهج التقليدي (Navigator 1.0) يركز على أوامر التنقل المباشرة، فإن النهج الحديث (Navigator 2.0) والمكتبات الخارجية تركز بشكل أكبر على إدارة قواعد التوجيه وكيفية تحديدها بطريقة توضيحية (Declarative) تعكس حالة التطبيق. هذا التحول هو السبب الرئيسي لتطور النظام بأكمله، حيث يهدف إلى حل المشاكل التي تنشأ مع نمو التطبيقات وتعقيدها.

الجزء الأول: التنقل التقليدي (Navigator 1.0) – البداية السهلة

يعتمد النهج التقليدي للتنقل في Flutter، المعروف بـ Navigator 1.0، على مفهوم بسيط ولكنه فعال في التطبيقات الصغيرة: مكدس الصفحات (The Stack). يمكن للمطور أن يتخيل Navigator كحاوية تدير مجموعة من الشاشات (التي يطلق عليها في Flutter اسم Routes). تعمل هذه الحاوية تمامًا مثل مكدس الأوراق، حيث تكون الشاشة الحالية التي يراها المستخدم دائمًا هي الموجودة في قمة المكدس.

مصدر الصورة

الطرق الأساسية للانتقال والعودة

• Navigator.push(): تُستخدم هذه الطريقة لإضافة صفحة جديدة إلى قمة المكدس، مما يؤدي إلى ظهورها على الشاشة.
• Navigator.pop(): تُستخدم لإزالة الصفحة الحالية من قمة المكدس، مما يعيد المستخدم تلقائيًا إلى الصفحة السابقة الموجودة أسفلها.

تعتبر MaterialPageRoute الأداة الأكثر شيوعًا لإنشاء Route جديد لدفعه إلى المكدس. تتميز هذه الأداة بأنها توفر تأثيرات انتقال تتكيف تلقائيًا مع نظام التشغيل الذي يعمل عليه التطبيق، مما يوفر تجربة مستخدم سلسة سواء على نظامي Android أو iOS.

مثال كود بسيط لـ Navigator.push وNavigator.pop (تصميم Material):

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(title: 'Navigation Basics', home: FirstRoute()));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Route')),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute<void>(
                builder: (context) => const SecondRoute(),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Route')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

في هذا المثال، ينتقل المستخدم إلى الشاشة الثانية عند الضغط على الزر، ويعود إلى الأولى باستخدام pop.

التنقل المسمى (Named Routes)

مع نمو التطبيقات، يصبح استخدام MaterialPageRoute في كل مرة أمرًا غير عملي ويجعل الكود أكثر تعقيدًا. لحل هذه المشكلة، يمكن للمطورين استخدام التنقل المسمى (Named Routes). يعتمد هذا النهج على إعطاء كل صفحة في التطبيق اسمًا فريدًا، مثل /home أو /settings، مما يسهل عملية الوصول إليها.

للاستفادة من التنقل المسمى، يجب أولاً تعريف المسارات المحددة بالأسماء في خاصية routes ضمن MaterialApp. بعد التكوين، يمكن استخدام أوامر مثل Navigator.pushNamed() للانتقال إلى مسار معين بالاسم بدلاً من إنشاء MaterialPageRoute بشكل صريح. بالإضافة إلى ذلك، تتوفر أوامر أخرى مثل Navigator.pushReplacementNamed() التي تقوم بالانتقال إلى صفحة جديدة مع إزالة الصفحة الحالية من سجل التنقل، وهو أمر مفيد عند الانتقال من شاشة تسجيل الدخول إلى الشاشة الرئيسية.

مثال كود لـ Named Routes:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => const FirstScreen(),
        '/second': (context) => const SecondScreen(),
      },
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

هنا، يتم تعريف المسارات في MaterialApp، ويتم التنقل باستخدام pushNamed.

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

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

على الرغم من بساطته وفعاليته في التطبيقات الصغيرة، فإن النهج التقليدي له عيوبه الجوهرية. فمع نمو التطبيق وتعقد المسارات، تتناثر أوامر التنقل المباشرة (push, pop) في جميع أجزاء الكود، مما يجعل من الصعب تتبع وإدارة منطق التنقل. الأهم من ذلك، أن هذا النهج لا يتكامل بشكل جيد مع سيناريوهات متقدمة مثل الروابط العميقة (Deep Linking) أو متصفحات الويب. هذا القصور هو الذي أدى إلى ظهور نهج جديد يركز على حل هذه المشاكل.

الجزء الثاني: التحول إلى التنقل التوضيحي (Navigator 2.0) – حلول للتعقيد

يُعتبر Navigator 2.0 (المعروف الآن باسم Router API) الحل المباشر للمشاكل الجوهرية التي يواجهها النهج التقليدي. تم تصميم هذا النظام خصيصًا لتوفير تحكم كامل في مكدس التنقل ودعم متطلبات تطبيقات الويب والروابط العميقة. من المهم فهم أن Navigator 2.0 ليس بديلًا كاملًا لـ Navigator 1.0، بل هو نظام توضيحي جديد يمكن استخدامه جنبًا إلى جنب مع النهج التقليدي.

المكونات الأساسية لـ Router API

يعتمد النهج التوضيحي على مجموعة من المكونات التي تعمل معًا بشكل متناغم:

• Page: يحل هذا المفهوم محل Route التقليدي. بدلاً من التعامل مع المسارات بشكل فردي، يتم تحديد حالة التنقل بأكملها من خلال قائمة من كائنات Page. عندما تتغير هذه القائمة، يقوم Navigator بتحديث المكدس تلقائيًا ليعكس الحالة الجديدة.
• RouterDelegate: هو العقل المدبر لنظام التوجيه. يقوم هذا المكون بمراقبة حالة التطبيق ويعيد بناء قائمة الصفحات بناءً على تلك الحالة. هو المسؤول عن بناء مكدس Navigator الصحيح الذي يتناسب مع حالة التطبيق الحالية، كما يستقبل الأحداث من نظام التشغيل، مثل الضغط على زر العودة.
• RouteInformationParser: يعمل كمترجم بين نظام التشغيل وتطبيقك. يأخذ معلومات المسار من نظام التشغيل (مثل رابط URL) ويحولها إلى نوع بيانات يمكن لـ RouterDelegate فهمه والتعامل معه. كما يقوم بالعملية العكسية، حيث يحول حالة التطبيق إلى مسار URL مناسب للمتصفح.

الفوائد الرئيسية لتطبيقات الويب

يُعد Navigator 2.0 حلاً مثاليًا لتحديات تطبيقات الويب. بفضل مكوناته، يمكنه تزامن URL في المتصفح تلقائيًا مع حالة التنقل داخل التطبيق. كما يوفر دعمًا كاملاً لزر العودة والتقدم في المتصفح، مما يجعل تطبيقات Flutter Web تتصرف كما لو كانت مواقع ويب طبيعية، وهو ما يعزز تجربة المستخدم بشكل كبير.

ورغم فعاليته وقوته، فإن Navigator 2.0 يشتهر بتعقيده. يتطلب إعداد هذا النظام كتابة كمية كبيرة من الكود الإجرائي المعقد، مما يجعل منحنى التعلم الخاص به حادًا جدًا على المطورين الجدد. هذا التعقيد هو السبب المباشر الذي دفع مجتمع Flutter إلى تطوير مكتبات خارجية تهدف إلى تبسيط هذا النهج، وهو ما سنستعرضه في الجزء التالي.

الجزء الثالث: المكتبات الخارجية – حلول قوية ومثالية للمطور

نظرًا للتعقيد الذي يواجهه المطورون عند استخدام Navigator 2.0 بشكل مباشر، ظهرت العديد من المكتبات الخارجية كطبقة تجريدية فوق Router API. هذه المكتبات تهدف إلى تبسيط عملية التكوين وتقليل كمية الكود المطلوبة، مما يجعل النهج التوضيحي أكثر سهولة وفعالية. لا يوجد فائز مطلق بين هذه المكتبات، فكل منها مصمم ليتناسب مع احتياجات معينة.

GoRouter: الخيار الرسمي للروابط العميقة

تُعد حزمة go_router من أشهر حزم التوجيه وأكثرها شيوعًا، لاسيما وأنها مدعومة من Google. تتميز ببساطة إعدادها وواجهة برمجية (API) سهلة الاستخدام تعتمد على المسارات المستندة إلى الـ URL.

الميزات الرئيسية:

• التوجيه بالـ URL: يمكن تعريف المسارات باستخدام صيغة بسيطة تعتمد على الـ URL، مثل /profile أو /product/:id، مما يسهل التنقل.
• الروابط العميقة (Deep Linking): تدعم الحزمة الروابط العميقة بشكل تلقائي بمجرد تعريف المسارات، مما يتيح للمستخدمين الانتقال مباشرة إلى محتوى معين داخل التطبيق من خلال رابط خارجي.
• التحويل (Redirection): توفر دعمًا قويًا لقواعد التحويل بناءً على حالة التطبيق، وهو أمر مثالي لسيناريوهات مثل إعادة توجيه المستخدم غير المسجل إلى صفحة تسجيل الدخول.
• التنقل المتداخل (Nested Navigation): من خلال ShellRoute، تتيح go_router إنشاء مسارات متداخلة، مما يجعلها مثالية لتطبيقات تحتوي على شريط تنقل سفلي (Bottom Navigation Bar) حيث يمتلك كل تبويب مكدس تنقل خاصًا به.

مثال كود بسيط لـ GoRouter:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(routerConfig: _router);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/details'),
          child: const Text('Go to the Details screen'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/'),
          child: const Text('Go back to the Home screen'),
        ),
      ),
    );
  }
}

هذا المثال يظهر كيفية إعداد مسارات وتنقل بينها باستخدام context.go.

Beamer: أداة للمطور المتقدم

تعتبر حزمة Beamer خيارًا قويًا آخر، ولكنها مصممة للمشاريع التي تتطلب مرونة أكبر وقدرة على التعامل مع سيناريوهات تنقل معقدة جدًا. على الرغم من أن منحنى التعلم الخاص بها قد يكون أكثر حدة من go_router، إلا أنها توفر تحكمًا دقيقًا للمطورين المتقدمين.

الميزات الرئيسية:

• المرونة الفائقة: توفر Beamer آليات قوية للتحكم في سلوك التوجيه، مما يسمح بإنشاء سيناريوهات تنقل معقدة .
• التنقل المتداخل: تعتبر Beamer ممتازة في التعامل مع التنقل المتداخل.
• مجتمع نشط: تتميز الحزمة بوجود مجتمع نشط يدفع تطويرها بناءً على حالات الاستخدام الحقيقية للمطورين.

مثال كود لـ Beamer:

import 'package:flutter/material.dart';
import 'package:beamer/beamer.dart';

// DATA
class Book {
  const Book(this.id, this.title, this.author);

  final int id;
  final String title;
  final String author;
}

const List<Book> books = [
  Book(1, 'Stranger in a Strange Land', 'Robert A. Heinlein'),
  Book(2, 'Foundation', 'Isaac Asimov'),
  Book(3, 'Fahrenheit 451', 'Ray Bradbury'),
];

// SCREENS
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.beamToNamed('/books'),
          child: const Text('See books'),
        ),
      ),
    );
  }
}

class BooksScreen extends StatelessWidget {
  const BooksScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Books'),
      ),
      body: ListView(
        children: books
            .map(
              (book) => ListTile(
                title: Text(book.title),
                subtitle: Text(book.author),
                onTap: () => context.beamToNamed('/books/${book.id}'),
              ),
            )
            .toList(),
      ),
    );
  }
}

class BookDetailsScreen extends StatelessWidget {
  const BookDetailsScreen({Key? key, required this.book}) : super(key: key);

  final Book? book;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(book?.title ?? 'Not Found'),
      ),
      body: book != null
          ? Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Author: ${book!.author}'),
            )
          : const SizedBox.shrink(),
    );
  }
}

// LOCATIONS
class BooksLocation extends BeamLocation<BeamState> {
  @override
  List<Pattern> get pathPatterns => ['/books/:bookId'];

  @override
  List<BeamPage> buildPages(BuildContext context, BeamState state) {
    final pages = [
      const BeamPage(
        key: ValueKey('home'),
        title: 'Home',
        child: HomeScreen(),
      ),
      if (state.uri.pathSegments.contains('books'))
        const BeamPage(
          key: ValueKey('books'),
          title: 'Books',
          child: BooksScreen(),
        ),
    ];
    final String? bookIdParameter = state.pathParameters['bookId'];
    if (bookIdParameter != null) {
      final bookId = int.tryParse(bookIdParameter);
      final book = books.firstWhereOrNull((book) => book.id == bookId);
      pages.add(
        BeamPage(
          key: ValueKey('book-$bookIdParameter'),
          title: 'Book #$bookIdParameter',
          child: BookDetailsScreen(book: book),
        ),
      );
    }
    return pages;
  }
}

// APP
class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final routerDelegate = BeamerDelegate(
    locationBuilder: BeamerLocationBuilder(
      beamLocations: [BooksLocation()],
    ),
    notFoundRedirectNamed: '/books',
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: routerDelegate,
      routeInformationParser: BeamerParser(),
      backButtonDispatcher:
          BeamerBackButtonDispatcher(delegate: routerDelegate),
    );
  }
}

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

هذا المثال يظهر كيفية إعداد مواقع (locations) وتنقل بين شاشات عرض كتب وتفاصيلها.

يُظهر وجود هذه المكتبات أن مجتمع Flutter يتجه نحو نضج كبير، حيث يقوم المطورون ببناء أدوات قوية لتسهيل العمل على المشاكل الواقعية بدلاً من انتظار الحلول الرسمية فقط.

الجزء الرابع: مواضيع متقدمة ونصائح احترافية

للارتقاء بمهارات التنقل في Flutter إلى المستوى الاحترافي، يجب على المطورين فهم بعض المفاهيم المتقدمة والتعامل مع التحديات الشائعة.

الروابط العميقة (Deep Linking)

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

لإعداد الروابط العميقة، يجب إتمام خطوات معينة على مستوى النظام الأساسي (Platform) :

• Android: يجب إضافة intent-filter إلى ملف AndroidManifest.xml لتحديد المسارات المسموح بها في التطبيق.
• iOS: يجب إعداد خاصية Associated Domains في Xcode وتوفير ملف apple-app-site-association على الخادم.

تُبسّط مكتبة go_router هذه العملية بشكل كبير. فبمجرد إعداد المسارات في go_router، تتولى الحزمة تلقائيًا التعامل مع الروابط العميقة الواردة، مما يلغي الحاجة إلى كتابة كود إجرائي معقد.

دمج التنقل مع أنظمة إدارة الحالة (State Management)

يواجه العديد من المطورين تحديًا عند محاولة دمج منطق التنقل مع أنظمة إدارة الحالة مثل Provider أو Bloc. المشكلة تكمن في أن منطق العمل (Business Logic)، الموجود في Bloc مثلاً، يجب أن لا يحتوي على أي كود تنقل.

الحل الأمثل هو فصل الاهتمامات. يجب أن يقتصر دور Bloc على معالجة الأحداث وتغيير الحالة (على سبيل المثال، تغيير الحالة إلى LoginSuccessState بعد نجاح تسجيل الدخول). أما الواجهة (UI)، فدورها هو الاستماع إلى هذه التغييرات، وعندما تلاحظ أن الحالة أصبحت LoginSuccessState، تقوم هي بتشغيل أمر التنقل المناسب. هذا النهج يضمن بقاء الكود نظيفًا وسهل الصيانة.

وفقًا لأفضل الممارسات في 2025، استخدم Stateless Widgets قدر الإمكان للعناصر غير المتغيرة، وادمج مع مكتبات مثل Riverpod أو Bloc لإدارة الحالة بكفاءة، مع التركيز على تقليل الـ boilerplate code.

نصائح لتحسين الأداء وتجنب المشاكل

• تحسين الأداء: لتجنب استهلاك الموارد غير الضرورية، يجب تقليل عدد العناصر (Widgets) المتداخلة في شجرة الواجهة قدر الإمكان.
• معالجة المشاكل الشائعة: في حال واجهت مشاكل في التنقل، خاصةً تلك المتعلقة بالشبكة، تأكد دائمًا من فحص اتصال الإنترنت، ومراجعة صلاحيات التطبيق، واستخدام أدوات مثل Dio التي توفر تحكمًا أفضل في طلبات الشبكة مقارنة بحزمة http الأساسية.

خاتمة: الملخص والاختيار الأمثل

لقد استعرضنا في هذا التقرير رحلة تطور نظام التنقل في Flutter، من النهج التقليدي البسيط إلى النهج التوضيحي الأكثر تعقيدًا وقوة. لقد ظهر أن لا توجد طريقة “أفضل” بشكل مطلق للتنقل، بل هناك دائمًا طريقة “أنسب” تتوقف على حجم المشروع ومتطلباته.

يوضح الجدول التالي ملخصًا للمقارنة بين أهم أساليب التنقل لمساعدتك في اتخاذ القرار الصحيح:

ابدأ اليوم بتطبيق هذه التقنيات في مشاريعك، وستلاحظ الفرق في سلاسة تطبيقاتك.