Skip to main content

Autocapture Routes​

Apps using Flutter's Navigator for routing pages can use FSNavigatorObserver to autocapture pages and avoid manually calling FS.page().

If your app uses named routes, FSNavigatorObserver needs no further configuration. Otherwise, you must configure a way to map routes to names for capture.

Parameters
    namePage String optional

    Computes the name of a page from a Route.

    initialProperties String optional

    Computes the initial properties of a page from a Route upon first visit.

    updateProperties String optional

    Computes any updates to properties of a page from a Route upon subsequent visits.

Conventions​

Use constant values when choosing a page name and put dynamic or differentiating info in the properties. For example, instead of having a "merchantX" page for each merchant in an e‑commerce app, use "Merchant" as the page name and add "merchantName": "merchantX" as a page property. Use properties for values you would want to search on. See Limits below.

Limits​

  • Capture up to 50 unique properties (exclusive of page name) on a single page.
  • Capture up to 500 unique properties across all pages.
  • The page name field is limited to 1,000 unique values. Any new page name values sent past this limit will be ignored.

Additional Information​

typedef PagePropertiesFactory = Map<String, Object?>? Function(
    Route<dynamic> current, Route<dynamic>? previous);

class FSNavigatorObserver {
    String Function(Route<dynamic>) namePage;
    PagePropertiesFactory initialProperties;
    PagePropertiesFactory updateProperties;
}

Example Invocations​

Use as-is when your app uses named routes​

MaterialApp(
    navigatorObservers: [FSNavigatorObserver()],
)

Get name and properties from route arguments​

MaterialApp(
    navigatorObservers: [
        FSNavigatorObserver(
            namePage: (route) => (route.settings.arguments as Map<String, dynamic>)['name'],
            initialProperties: (route, _) => (route.settings.arguments as Map<String, dynamic>)['properties'],
            updateProperties: (route, _) => (route.settings.arguments as Map<String, dynamic>)['properties'],
        ),
    ],
)
// Set name an properties when pushing your routes
Navigator.of(context).push(
    MaterialPageRoute(
        settings: RouteSettings(arguments: <String, dynamic>{
            'name': 'myRoute', 
            'properties': <String, String>{'key': 'value'},
        });
    )
);