FlutterPageTracker是一个用于监听页面
露出
、
离开
的plugin。它具有以下特性：
露出
和
离开
事件（PageRoute），
曝光事件
和前一个页面的
离开事件
。
离开事件
和前一个页面的
曝光事件
。
露出
和
离开
（PopupRoute），
露出
、
离开
事件
切换
事件
入栈
时，前一个页面会触发页面
离开事件
出栈
时，前一个页面会触发页面
曝光事件
dependencies:
flutter_page_tracker: ^1.2.2
import 'package:flutter_page_tracker/flutter_page_tracker.dart';
void main() => runApp(
TrackerRouteObserverProvider(
child: MyApp(),
必须使用PageTrackerAware和TrackerPageMixin这两个mixin
class HomePageState extends State<MyHomePage> with PageTrackerAware, TrackerPageMixin {
@override
Widget build(BuildContext context) {
return Container();
@override
void didPageView() {
super.didPageView();
// 发送页面露出事件
@override
void didPageExit() {
super.didPageExit();
// 发送页面离开事件
class PopupPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SimpleDialog(
children: <Widget>[
TrackerDialogWrapper(
didPageView: () {
// 发送页面曝光事件
didPageExit: () {
// 发送页面离开事件
child: Container(),
在StatefulWidget中，推荐直接使用PageViewListenerMixin发送页面事件，如果是StatelessWidget组件则可以使用PageViewListenerWrapper。
PageViewListenerWrapper内部也是使用PageViewListenerMixin来发送事件。
// 嵌入到PageView组件中页面
class Page extends StatefulWidget {
final int index;
const Page({Key key, this.index}): super(key: key);
@override
PageState createState() {
return PageState();
class PageState extends State<Page> with PageTrackerAware, PageViewListenerMixin {
int get pageViewIndex => widget.index;
@override
void didPageView() {
super.didPageView();
// 页面曝光事件
@override
void didPageExit() {
super.didPageExit();
// 页面离开事件
@override
Widget build(BuildContext context) {
return Container();
// PageView组件
class PageViewMixinPage extends StatefulWidget {
@override
PageViewMixinPageState createState() => PageViewMixinPageState();
class PageViewMixinPageState extends State<PageViewMixinPage> {
PageController pageController;
@override
void initState() {
super.initState();
pageController = PageController();
@override
Widget build(BuildContext context) {
return PageViewWrapper(
changeDelegate: PageViewChangeDelegate(pageController),
pageAmount: 3,
initialPage: pageController.initialPage,
child: PageView(
controller: pageController,
children: <Widget>[
Page(index: 0,),
Page(index: 1,),
Page(index: 3,),
在这个例子中我们只用PageViewListenerWrapper来发送页面事件，我们也可以向例子3.3中一样使用直接使用PageViewListenerMixin。
在StatefulWidget中，荐使用mixin更简洁。
class TabViewPage extends StatefulWidget {
TabViewPage({Key key,}) : super(key: key);
@override
_State createState() => _State();
class _State extends State<TabViewPage> with TickerProviderStateMixin {
TabController tabController = TabController(initialIndex: 0, length: 3, vsync: this);
@override
Widget build(BuildContext context) {
return Scaffold(
// 添加TabView的包裹层
body: PageViewWrapper(
// Tab页数量
pageAmount: 3,
// 初始Tab下标
initialPage: 0,
// 监听Tab onChange事件
changeDelegate: TabViewChangeDelegate(tabController),
child: TabBarView(
controller: tabController,
children: <Widget>[
Builder(
builder: (_) {
// 监听由PageViewWrapper转发的PageView，PageExit事件
return PageViewListenerWrapper(
onPageView: () {
// 发送页面曝光事件
onPageExit: () {
// 发送页面离开事件
child: Container(),
// 第二个Tab
// 第三个Tab
在这个例子中我们只用PageViewListenerWrapper来发送页面事件，我们也可以向例子3.3中一样使用直接使用PageViewListenerMixin。
在StatefulWidget中，荐使用mixin更简洁。
class PageViewInTabViewPage extends StatefulWidget {
@override
_State createState() => _State();
class _State extends State<PageViewInTabViewPage> with TickerProviderStateMixin {
TabController tabController;
PageController pageController;
@override
void initState() {
super.initState();
tabController = TabController(initialIndex: 0, length: 3, vsync: this);
pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
// 外层TabView
body: PageViewWrapper(
pageAmount: 3, // 子Tab数量
initialPage: 0, // 首个展现的Tab序号
changeDelegate: TabViewChangeDelegate(tabController),
child: TabBarView(
controller: tabController,
children: <Widget>[
Builder(
builder: (BuildContext context) {
// 转发上层的事件
return PageViewListenerWrapper(
// 内层PageView
child: PageViewWrapper(
changeDelegate: PageViewChangeDelegate(pageController),
pageAmount: 3,
initialPage: pageController.initialPage,
child: PageView(
controller: pageController,
children: <Widget>[
PageViewListenerWrapper(
onPageView: () {
// 页面露出事件
onPageExit: () {
// 页面离开事件
child: Container()
// PageView中的第二个页面
// PageView中的第三个页面
// tab2
// tab3
页面的埋点追踪通常处于业务开发的最后一环，留给埋点的开发时间通常并不充裕，但是埋点数据对于后期的产品调整有重要的意义，所以一个稳定高效的埋点框架是非常重要的。
我们期望当调用Navigator.of(context).pushNamed("XXX Page");时，首先对之前的页面发送PageExit，然后对当前页面发送PageView事件。当调用Navigator.of(context).pop();时则，首先发送当前页面的PageExit事件，再发送之前页面的PageView事件。
我们首先想到的是使用RouteObserver，但是PageView和PageExit发送的顺序相反。并且PopupRoute类型的路由会影响前一个页面的埋点事件发送，例如我们入栈的顺序是 A页面 -> A页面上的弹窗 -> B页面，但是在这个过程中A页面的PageExit事件没有发送。
所以我们必须自己管理路由栈，这样判断不同路由的类型，并控制事件的顺序。详细实现方案在后面展开。
这两个组件虽然与Flutter的路由无关，但是在产品经理眼中它们任属于页面。并且当Tab发生首次曝光和切换的时候我们都需要发送埋点事件。
例如当Tab页A首次曝光时，我们首先发送上一个页面的PageExit事件，然后发送TabA的PageView事件。当我们从TabA切换到TabB的时候，先发送TabA的PageExit事件，然后发送TabB的PageView事件。当我们push一个新的路由时，需要发送TabB的PageExit事件。
这套流程需要Tab页和普通页面之间通过事件机制来交互，如果直接把这套机制搬到业务代码中，那么业务代码中就会包含大量与业务无关并且重复的代码。详细的抽象方案见后文。
RouteObserver给了我们一个不错的起点，我们重写其中的didPop和didPush方法就并调整事件发送的顺序就可以解决这个问题。详见TrackerStackObserver，在didpop方法中我们先触发上一个路由的PageExit事件，然后再触发当前路由的PageView事件。
在RouteObserver.didPop(Route route, Route previousRoute)中，我们可以通过previousRoute找到上一个路由，并更具它来发送上一个路由的PageView事件。但是如果上一个路由是Dialog，就会造成错误，因为我们实际想要的是包含这个Dialog的路由。
要解决这个问题我们必须自己维护一个路由栈，这样当didPop触发时我们就可以找到真正的上一个路由。请参考这一段代码，这里的routes是当前的路由栈。
这个问题可以分解为两个小问题：
如何把TabView页面和普通的路由进行串联？
为了解决这两个问题，我们需要一个容器来管理tab页面的状态并且承载事件转发的任务。详见下图:
其中TabsWrapper会监听来自Flutter的路由事件，并转发给当前曝光的Tab，这就可以解决了问题一。
同时TabsWrappe也会包含一个TabController和上一个被打开的Tab索引，TabsWrappe会监听来自TabController的onChange(index)事件，并把事件转发给对应的tab，这就解决了问题二。