使用 Navigator 2.0 的 Flutter Firebase 分析跟踪应用程序屏幕变化答案

【问题标题】：Flutter Firebase analytics tracking app screen change with Navigator 2.0使用 Navigator 2.0 的 Flutter Firebase 分析跟踪应用程序屏幕变化
【发布时间】：2021-12-21 07:46:03
【问题描述】：

我发现的所有示例都使用 MaterialApp 构造函数中的“navigatorObservers”

  static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Analytics Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: <NavigatorObserver>[observer],
      home: MyHomePage(
        title: 'Firebase Analytics Demo',
        analytics: analytics,
        observer: observer,
      ),
    );
  }

但我的应用程序使用 Navigator 2.0 模式中的 MatterialApp.router，并且找不到用于附加 navigatorObserver 以跟踪屏幕更改事件以进行 firebase 分析的等效项。对此有何解决方法或建议？

【问题讨论】：

标签： flutter firebase-analytics

【解决方案1】：

MaterialApp.router 构造函数需要routerDelegate 属性。此委托通常是 Navigator 小部件的包装器。此小部件具有 observers 属性 - 这正是您要寻找的。p>

这是RouterDelegate 的示例，它同时注册了 Firebase 和 Segment 观察者：

class AppNavigator extends RouterDelegate<void>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<void> {
  AppNavigator({
    @required Page<void> initialPage,
    this.analyticsObserver,
    this.segmentObserver
  })  : assert(initialPage != null),
        navigatorKey = GlobalKey<NavigatorState>() {
    _pagesStack = [initialPage];
  }

  final FirebaseAnalyticsObserver analyticsObserver;
  final SegmentObserver segmentObserver;

  ...

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [..._pagesStack],
      observers: [analyticsObserver, segmentObserver],
      onPopPage: (route, dynamic result) {
        if (!route.didPop(result)) {
          return false;
        }

        for (final page in _pagesStack) {
          if (page == route.settings) {
            _pagesStack.remove(page);
            notifyListeners();
            break;
          }
        }

        return true;
      },
    );
  }
}

请注意，默认情况下，Firebase Analytics 模块希望您的页面路由将name 属性设置为RouteSettings 的一部分：

  // From FirebaseAnalyticsObserver
  void _sendScreenView(PageRoute<dynamic> route) {
    final String? screenName = nameExtractor(route.settings);
    if (screenName != null) {
      analytics.setCurrentScreen(screenName: screenName).catchError(
        (Object error) {
          final _onError = this._onError;
          if (_onError == null) {
            debugPrint('$FirebaseAnalyticsObserver: $error');
          } else {
            _onError(error as PlatformException);
          }
        },
        test: (Object error) => error is PlatformException,
      );
    }
  }

您可以通过向FirebaseAnalyticsObserver 构造函数提供自定义nameExtractor 属性来覆盖此行为。

【讨论】：