Flutter Page Tracker 项目教程

Flutter Page Tracker 项目教程

flutter_page_trackerflutter埋点、弹窗埋点、页面埋点事件捕获框架，支持普通页面的页面曝光事件（PageView），页面离开事件（PageExit）。支持在TabView和PageView组件中发送页面曝光和页面离开项目地址:https://gitcode.com/gh_mirrors/fl/flutter_page_tracker

1. 项目的目录结构及介绍

Flutter Page Tracker 项目的目录结构如下：

flutter_page_tracker/
├── README.md
├── analysis_options.yaml
├── example/
│   ├── lib/
│   │   ├── main.dart
│   │   └── page_tracker_example.dart
│   └── pubspec.yaml
├── lib/
│   ├── flutter_page_tracker.dart
│   └── src/
│       ├── page_tracker.dart
│       └── page_tracker_observer.dart
├── pubspec.yaml
└── test/
    └── flutter_page_tracker_test.dart

目录结构介绍

• README.md: 项目说明文件，包含项目的基本信息和使用说明。
• analysis_options.yaml: 代码分析配置文件，用于配置代码风格和静态分析规则。
• example/: 示例项目目录，包含一个简单的 Flutter 应用，展示如何使用 flutter_page_tracker。
  • lib/: 示例项目的源代码目录。
    • main.dart: 示例项目的主入口文件。
    • page_tracker_example.dart: 示例项目中使用 flutter_page_tracker 的代码。
  • pubspec.yaml: 示例项目的依赖管理文件。
• lib/: 核心库目录，包含 flutter_page_tracker 的主要实现。
  • flutter_page_tracker.dart: 库的入口文件。
  • src/: 库的源代码目录。
    • page_tracker.dart: 页面追踪的核心实现。
    • page_tracker_observer.dart: 页面追踪的观察者实现。
• pubspec.yaml: 项目的依赖管理文件。
• test/: 测试目录，包含库的单元测试。
  • flutter_page_tracker_test.dart: 库的单元测试文件。

2. 项目的启动文件介绍

项目的启动文件是 example/lib/main.dart，它是示例项目的主入口文件。以下是该文件的主要内容：

import 'package:flutter/material.dart';
import 'package:flutter_page_tracker/flutter_page_tracker.dart';
import 'page_tracker_example.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Page Tracker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageTrackerExample(),
      navigatorObservers: [PageTrackerObserver()],
    );
  }
}

启动文件介绍

• main(): 应用的入口函数，调用 runApp 方法启动应用。
• MyApp: 应用的根组件，继承自 StatelessWidget。
  • build 方法返回一个 MaterialApp，配置应用的基本信息和主题。
  • home 属性指定应用的主页为 PageTrackerExample。
  • navigatorObservers 属性注册 PageTrackerObserver，用于追踪页面导航事件。

3. 项目的配置文件介绍

项目的配置文件主要是 pubspec.yaml，它位于项目根目录和 example 目录下。以下是项目根目录下的 pubspec.yaml 文件内容：

name: flutter_page_tracker
description: A Flutter package to track page changes.
version: 0.0.1
homepage: https://github.com/SBDavid/flutter_page_tracker

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0

flutter:
  uses-material-design: true

配置文件介绍

• name: 项目的名称。
• description: 项目的描述。
• version: 项目的版本号。
• homepage: 项目的主页链接。
• environment: 指定项目支持的 Dart SDK 版本范围。
• dependencies:

flutter_page_trackerflutter埋点、弹窗埋点、页面埋点事件捕获框架，支持普通页面的页面曝光事件（PageView），页面离开事件（PageExit）。支持在TabView和PageView组件中发送页面曝光和页面离开项目地址:https://gitcode.com/gh_mirrors/fl/flutter_page_tracker