Flutter 监听页面跳转实现埋点

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页面"),
            )
          ],
        ),
      ),
    );
  }
}

事件点击的埋点

• 在各个点击事件实现的地方 进行埋点