Flutter Firebase Analytics: Track page changes with onGenerateRoute

Question

I have firebase analytics enabled for my application and I am trying to get the firebase debug-view to show my page changes. With the code below, currently nothing is being tracked, and I don't understand why. I have followed the firebase documentation for tracking page-views, but apparently I'm missing something when it comes to using onGenerateRoute.

My main:

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "localhour",
        onGenerateRoute: router.generateRoute,
        initialRoute: '/',
        navigatorObservers: <NavigatorObserver>[observer],
      ),
    );
  }
}

My generateRoute function:

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case '/':
      return MaterialPageRoute(builder: (context) => RootPage());
      break;
    case '/login':
      return MaterialPageRoute(builder: (context) => LoginPage());
      break;
    case '/home':
      var user = settings.arguments;
      return MaterialPageRoute(
          builder: (context) => HomePage(
                user: user,
              ));
      break;
    case '/store':
      return MaterialPageRoute(builder: (context) => StorePage());
      break;
    case '/store-details':
      var argument = settings.arguments;
      return MaterialPageRoute(
          builder: (context) => StoreDetails(
                storeDetails: argument,
              ));
      break;
  }
}

I have used analytics before to track page changes automatically in a previous app but used the "routes" method in my main function. Can someone explain why I am not getting any feedback using this method above? Do the screens have to be named explicitly? (Which I have also tried, but unsuccessfully)

Solution

Hey if you're still looking for an answer to this, it's because your not pushing the name into the MaterialPageRoute.

So in your generateRoute function:

  '/login':
      return MaterialPageRoute(
         builder: (context) => LoginPage(),
         settings: RouteSettings(name: settings.name));
      break;

That'll push the name to Firebase Analytics for you. Just add it for each case in the switch.

Comments

[Michael Tolsma]

Hey, I actually forgot about this post and found a similar solution elsewhere. But you get the winning tick. Thanks.

[Rony Tesler]

How can I have access to the 'FirebaseAnalytics' object that I have in 'MyApp' inside 'generateRoute'?

[Tyrell James]

Hey @RonyTesler, there's a couple of ways you can do this but I prefer Dane Mackier's solution, here's his article: filledstacks.com/post/firebase-analytics-and-metrics-in-flut‌​ter