Flutter中埋点的实现
页面切换的埋点实现
- 首先需要实现一个NavigatorObserver的子类, 并在该类中实现didPop、didPush、didReplace、didRemove等方法, 这些方法中都可以拿到目标页面和被操作的页面, 进行埋点, 内容如下:
import 'package:flutter/material.dart';
class MyNavigator extends NavigatorObserver{
@override
void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
super.didPush(route, previousRoute);
debugPrint("routeName: ${route.settings.name}; routeName: ${route.navigator}");
var previousName = '';
if (previousRoute == null) {
previousName = 'null';
}else {
previousName = previousRoute.settings.name ?? "";
}
debugPrint('从$previousName页面进入${route.settings.name}页面');
}
@override
void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
super.didPop(route, previousRoute);
var previousName = '';
if (previousRoute == null) {
previousName = 'null';
} else {
previousName = previousRoute.settings.name ?? "";
}
debugPrint('从${route.settings.name ?? ""}页面退出回到$previousName');
}
@override
void didStopUserGesture() {
super.didStopUserGesture();
debugPrint("didStopUserGesture");
}
@override
void didStartUserGesture(Route<dynamic> route, Route<dynamic>? previousRoute) {
super.didStartUserGesture(route, previousRoute);
debugPrint("didStartUserGesture");
}
@override
void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
super.didReplace(newRoute: newRoute,oldRoute: oldRoute);
debugPrint("didReplace");
var previousName = '';
if (oldRoute == null) {
previousName = 'null';
} else {
previousName = oldRoute.settings.name ?? "";
}
debugPrint('使用${newRoute?.settings.name ?? ""}页面替换$previousName页面');
}
@override
void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) {
super.didRemove(route, previousRoute);
var previousName = '';
if (previousRoute == null) {
previousName = 'null';
} else {
previousName = previousRoute.settings.name ?? "";
}
debugPrint('移除${route.settings.name ?? ""}页面直到到$previousName页面');
}
}
- 然后需要在我们的App中监听跳转,具体就是声明一个我们刚才实现的NavigatorObserver子类对象并赋值给app的navigatorObservers属性, 这样我们就完成了页面跳转的监听
import 'package:navigator_observer/homePage.dart';
import 'package:navigator_observer/pageA.dart';
import 'package:navigator_observer/pageB.dart';
import 'package:navigator_observer/pageC.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
navigatorObservers: [MyNavigator()],
routes: {
"/A":(content)=>const PageA(title: "PageA"),
"/B":(content)=>const PageB(title: "PageB"),
"/C":(content)=>const PageC(title: "PageC"),
},
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
- 接下来我们可以实现PageA, PageB, PageC页面来测试页面间的跳转
import 'package:flutter/material.dart';
import 'package:navigator_observer/pageB.dart';
class PageA extends StatefulWidget {
const PageA({super.key, required this.title});
final String title;
@override
State<PageA> createState() => _PageAState();
}
class _PageAState extends State<PageA> {
void onPress(){
Navigator.of(context).pushNamed("/B");
// Navigator.of(context).push(MaterialPageRoute(
// builder: (context) => const PageB(title: "PageB",),
// settings: const RouteSettings(
// name: "PageB",
// )
// ));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("PageA"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
const Text(
'PageA',
),
MaterialButton(
onPressed: onPress,
child: const Text("进入 B 页面"),
)
],
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:navigator_observer/pageC.dart';
class PageB extends StatefulWidget {
const PageB({super.key, required this.title});
final String title;
@override
State<PageB> createState() => _PageBState();
}
class _PageBState extends State<PageB> {
void onPress(){
// Navigator.of(context).pushNamed("/C");
// Navigator.of(context).pushNamedAndRemoveUntil("/C", ModalRoute.withName('/A'));
// Navigator.of(context).push(MaterialPageRoute(
// builder: (context) => const PageC(title: "PageC",),
// settings: const RouteSettings(
// name: "PageC",
// )
// ));
Navigator.of(context).pushReplacementNamed("/C");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("PageB"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
const Text(
'PageB',
),
MaterialButton(
onPressed: onPress,
child: const Text("进入C页面"),
)
],
),
),
);
}
}
import 'package:flutter/material.dart';
class PageC extends StatefulWidget {
const PageC({super.key, required this.title});
final String title;
@override
State<PageC> createState() => _PageCState();
}
class _PageCState extends State<PageC> {
void onPush(){
// Navigator.of(context).push(MaterialPageRoute(
// builder: (context) => const PageC(title: "PageC",),
// settings: const RouteSettings(
// name: "PageC",
// )
// ));
// Navigator.of(context).popAndPushNamed("/A");
Navigator.of(context).pop();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("PageC"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
const Text(
'PageC',
),
MaterialButton(
onPressed: onPush,
child: const Text("回到A页面"),
)
],
),
),
);
}
}
事件点击的埋点
