ما هو RouteObserver وRouteAware في Flutter؟

ما هو RouteObserver وRouteAware في Flutter؟

تعد إدارة التنقل جزءًا مهمًا من أي تطبيق Flutter وبعض الأدوات المهمة التي توفرها Flutter لإدارة التنقل تشمل RouteObserver وRouteAware. تسمح لك هذه الأدوات بمراقبة تغييرات الحالة المتعلقة بالتنقل في الصفحة أو "المسارات" في التطبيق. ستتعلم في هذه المقالة كيفية استخدام RouteObserver وRouteAware مع الشرح

الكود التفصيلي الموضح أعلاه.

ما هو RouteObserver وكيف يعمل؟

RouteObserver هو كائن يراقب التغييرات في حالة الصفحات (المسارات) في تطبيق Flutter. ويمكن استخدامه لتتبع انتقال المستخدم بين الصفحات في التطبيق، إما عند الانتقال إلى صفحة جديدة (الدفع) أو العودة إلى الصفحة السابقة (البوب). ما هو RouteAware وكيف يعمل RouteObserver؟

RouteAware عبارة عن واجهة يمكن إضافتها إلى أي StatefulWidget للسماح لها "بالتفاعل" مع التغييرات التي تم إجراؤها على الصفحات التي تتم مراقبتها بواسطة RouteObserver. يتضمن RouteAware العديد من التذكيرات مثل:

didPush: يتم الاتصال به عند فتح الصفحة.

didPop: يتم الاتصال به عند مغادرة الصفحة.

didPopNext: يتم الاتصال به عند العودة إلى الصفحة.

didPushNext: يتم استدعاؤه عند الانتقال إلى صفحة أخرى من هذه الصفحة.

كيف يتكامل RouteObserver وRouteAware مع Block؟

في الكود الموضح، يتم استخدام BlocProvider وBlocConsumer لإدارة حالة التطبيق. يمكن دمج RouteObserver في Block كرمز بحيث تتم مراقبة انتقال المستخدم بين الصفحات بالتوازي مع إدارة الحالة في التطبيق عبر Block.

هنا، يتم إنشاء كائن RouteObserver من نوع PageRoute، والذي سيراقب تغييرات الحالة المتعلقة بالتنقل في الصفحة.

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

تهيئة التطبيق باستخدام BlocProvider وMaterialApp:
هنا، يتم تمرير RouteObserver كأحد مراقبي متصفح MaterialApp لمراقبة التنقل.

return BlocProvider(
  create: (context) => MainCubit(),
  child: MaterialApp(
    navigatorObservers: <NavigatorObserver>[routeObserver],
    home: HomeScreen(),
  ),
);

تهيئة التطبيق باستخدام BlocProvider وMaterialApp

هنا، يتم تمرير RouteObserver كأحد مراقبي متصفح MaterialApp لمراقبة التنقل.

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with RouteAware{

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final ModalRoute? modalRoute = ModalRoute.of(context);
    if (modalRoute is PageRoute) {
      routeObserver.subscribe(this, modalRoute);
    }
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    print('تم فتح الصفحة');
  }

  @override
  void didPop() {
    print('تم مغادرة الصفحة');
  }

  @override
  void didPopNext() {
    print('تم العودة إلى هذه الصفحة');
  }

  @override
  void didPushNext() {
    print('تم الانتقال إلى صفحة أخرى من هذه الصفحة');
  }


  @override
  Widget build(BuildContext context) {
    return BlocConsumer<MainCubit, MainState>(
      listener: (context, state) {},
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(),
          resizeToAvoidBottomInset: false,
          body: SizedBox(),
        );
      },
    );
  }
}