AutoRoute package support

In order to support automatic screen tracking when using the AutoRoute package ↗, we provide the CSQNavigatorAutoRouteObserver. This observer extends the standard CSQNavigatorObserver to add compatibility with AutoRoute’s navigation system, including support for tab navigation.

Add csq_navigator_auto_route_observer as a dev dependency.

flutter pub add -d csq_navigator_auto_route_observer

dev_dependencies:
  csq_navigator_auto_route_observer: ^1.0.0

Once the package has been added, you’ll need to add the CSQNavigatorAutoRouteObserver to the root navigator in your app.

import 'package:csq_navigator_auto_route_observer/csq_navigator_auto_route_observer.dart';

return MaterialApp.router(
  routerConfig: _appRouter.config(
    navigatorObservers: () => [
      CSQNavigatorAutoRouteObserver(),
    ],
  ),
);

The CSQNavigatorAutoRouteObserver can be configured with the following arguments:

• ExcludeRouteFromTracking
• ScreenNameProvider

An optional callback function that determines whether a specific route should be excluded from tracking. The function takes a Route as input and returns a bool.

Use this function to selectively exclude certain routes from automatic tracking by returning true for those routes.

import 'package:contentsquare/csq.dart';

CSQNavigatorAutoRouteObserver(
  excludeRouteFromTracking: (route) {
    // Exclude a specific route name
    if (route.settings.name == '/myRoute') return true;

    // Exclude popup routes (menus, popups, dialogs)
    if (route is PopupRoute) return true;

    // Exclude dialog routes (AlertDialog, showDialog)
    // Many dialogs inherit from PopupRoute, but this is extra safety:
    if (route.runtimeType.toString().contains('DialogRoute')) return true;

    // Exclude full-screen dialogs
    if (route is PageRoute && route.fullscreenDialog == true) return true;

    return false;
  },
)

By default, all routes are tracked.

An optional callback function used to customize the screen name for a given route. The function takes a Route as input and returns a String representing the desired screen name.

Use this function to define custom screen names for specific routes.

import 'package:contentsquare/csq.dart';

CSQNavigatorAutoRouteObserver(
  screenNameProvider: (route) {
    final screenName = _formatScreenName(route.settings.name);
    return screenName;
  },
)

This package requires:

• AutoRoute: Version 9.0.0 or higher
• CSQ SDK: Compatible with the latest CSQ SDK for Flutter

Make sure your project meets these version requirements before integrating the csq_navigator_auto_route_observer package.

• Initial release