---
title: AutoRoute package support - Flutter
description: How to use the CSQNavigatorAutoRouteObserver with AutoRoute package
lastUpdated: 05 January 2026
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-flutter/product-analytics/auto_route_support/
  md: https://docs.contentsquare.com/en/csq-sdk-flutter/product-analytics/auto_route_support/index.md
---

In order to support automatic screen tracking when using the [AutoRoute package ↗](https://pub.dev/packages/auto_route), we provide the `CSQNavigatorAutoRouteObserver`. This observer extends the standard `CSQNavigatorObserver` to add compatibility with AutoRoute's navigation system, including support for tab navigation.

Warning

If you are using `AutoRoute`, use `CSQNavigatorAutoRouteObserver` instead the standard `CSQNavigatorObserver` for better compatibility and support for tab navigation.

## Installation

Add `csq_navigator_auto_route_observer` as a **dev dependency**.

```shell
flutter pub add -d csq_navigator_auto_route_observer
```

```yaml
dev_dependencies:
  csq_navigator_auto_route_observer: ^1.0.0
```

## Usage

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

```dart
import 'package:csq_navigator_auto_route_observer/csq_navigator_auto_route_observer.dart';


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

Tip

We recommend using [Routes ↗](https://api.flutter.dev/flutter/widgets/Route-class.html) with proper [names ↗](https://api.flutter.dev/flutter/widgets/RouteSettings/name.html) assigned to them. This will be used as a fallback value for the automatic screen name capturing.

The `CSQNavigatorAutoRouteObserver` can be configured with the following arguments:

* [ExcludeRouteFromTracking](#excluderoutefromtracking)
* [ScreenNameProvider](#screennameprovider)

### ExcludeRouteFromTracking

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.

```dart
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.

Note

`CSQNavigatorAutoRouteObserver` consider modal routes (like `showDialog`, `showModalBottomSheet`, etc.) and pop-ups (such as `showDialog`) as separate screens. If you don't want to track them as screens, you can use the `excludeRouteFromTracking` configuration option to exclude them.

### ScreenNameProvider

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.

```dart
import 'package:contentsquare/csq.dart';


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

Tip

If you use dart code obfuscation in your release builds, we recommend to use the `screenNameProvider` to avoid obfuscated screen names being tracked.

## Compatibility

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.

## Changelog

### 1.0.0 - 2025.12.09

* Initial release