將 Firebase 與 Google Analytics 設定好以後，Flutter 可以很方便地送出 screen_view 事件。但必須在每一頁手動加入，找到了一個方法可以在改動最小的情況下每一頁自動送出。
使用 Mixin
解法是實作一個 Mixin，並在每一頁使用。
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart';
// 在這邊定義每一個頁面。
enum AnalyticsRoute {
example,
}
mixin RouteAwareAnalytics<T extends StatefulWidget> on State<T>
implements RouteAware {
AnalyticsRoute get route;
@override
void didChangeDependencies() {
routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
super.didChangeDependencies();
}
@override
void dispose() {
routeObserver.unsubscribe(this);
super.dispose();
}
@override
void didPop() {}
@override
void didPopNext() {
// 上一頁被 pop 掉以後顯示這一頁。
_setCurrentScreen(route);
}
@override
void didPush() {
// 這一頁被顯示的時候。
_setCurrentScreen(route);
}
@override
void didPushNext() {}
Future<void> _setCurrentScreen(AnalyticsRoute analyticsRoute) async {
// 將首字母轉為大寫。
String screenName =
toBeginningOfSentenceCase(analyticsRoute.name.toString()) ?? '';
await FirebaseAnalytics.instance.logEvent(
name: 'screen_view',
parameters: {
'firebase_screen': screenName,
// 假設 Class 名稱為 screenName + "Screen"，請改成你自己的 Class 名稱。
'firebase_screen_class': '${screenName}Screen',
},
);
}
}
在每一個頁面使用 RouteAwareAnalytics：
class ExampleScreen extends StatefulWidget {
@override
_ExampleScreenState createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> with RouteAwareAnalytics {
@override
AnalyticsRoute get route => AnalyticsRoute.example;
// 其他程式碼...
}
記得在初始化 App 時註冊 routeObserver：
return MaterialApp(
navigatorObservers: [
routeObserver,
],
// 其他程式碼...
)
隔天在 Google Analytics 頁面上就看得到了，如果想要即時除錯的話可以使用 DebugView。