Track and name Flutter screens

Connect your Flutter navigation so you can follow a journey in CUX. Name destinations that need a recognizable label and check the recorded sequence on Android and iOS.

Package covered: cux_analytics_sdk 0.0.27.

Connect Navigator-based navigation

Initialize the SDK with a valid context and wrap app content with AnalyticsWidget as shown in installation. Add a CUX observer to your existing MaterialApp or Navigator:

import 'package:cux_analytics_sdk/analytics_sdk.dart';

navigatorObservers: [
  CuxAnalytics.createNavigationObserver(
    rootWidget: this,
    navigatorTag: 'main',
  ),
],

This is a configuration fragment for your app widget. Keep any existing observers in the list. Use named rootWidget and navigatorTag arguments. Do not create another observer on every screen.

Connect router-based navigation

For a router-based app, use the exported CuxRouterNavigationListener:

import 'package:cux_analytics_sdk/go_router_navigation_observer.dart';

final cuxNavigation = CuxRouterNavigationListener(
  rootWidget: this,
  navigatorTag: 'main',
);

MaterialApp.router(
  routerConfig: router,
  onNavigationNotification: cuxNavigation.onNavigationNotification,
  builder: (context, child) => AnalyticsRoot(child: child!),
);

This is an alternative navigation setup for your existing app, not a second app instance. router is your configured router. Preserve any existing navigation notification handler when wiring this callback.

Use distinct, stable navigator tags when your app has multiple navigators. The class in this package is CuxRouterNavigationListener, not RouterNavigationListener.

AnalyticsRoot is the initialization wrapper from the installation example. Choose the navigation setup your app uses and keep the listener stable for that app instance.

Name a destination explicitly

When you need a recognizable name for a screen, wrap its content:

import 'package:cux_analytics_sdk/destination_widget.dart';

DestinationWidget(
  destinationName: 'Checkout',
  child: checkoutContent,
);

checkoutContent is your existing widget. Keep the name stable and free of customer data. Check the resulting navigation in your app instead of assuming every custom layout is automatically recognized.

Verify navigation

Test the initial screen, a nested destination, Back navigation and the current screen after collection resumes. Include custom layouts and multiple navigators if your app uses them.

Use stable, distinct navigator tags and destination names without user IDs or route arguments. Send completed outcomes through custom events.

If the sequence is missing, follow Flutter troubleshooting.