Flutter屏幕时间追踪插件screen_time_tracker的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter屏幕时间追踪插件screen_time_tracker的使用

README.md

README.md

Screen Time Tracker

一个用于跟踪应用程序中不同屏幕上的时间消耗的Flutter包。此包提供了一种简单的方式来通过跟踪用户在每个屏幕上花费的时间来监控用户参与度。

特性

  • 单例类ScreenTimeTracker类实现为单例,以确保在整个应用中使用单一实例。
  • 调试模式:轻松启用或禁用调试日志记录以跟踪屏幕时间更新。
  • 自动跟踪:使用ScreenTimeWidget自动开始和停止跟踪当前激活的屏幕。
  • 汇总视图:使用ScreenTimeSummaryWidget显示每个屏幕上花费时间的汇总。

安装

要使用此包,请将其添加到您的pubspec.yaml文件中:

dependencies:
  screen_time_tracker: ^1.0.0

使用

  1. 导入包
import 'package:screen_time_tracker/screen_time_tracker.dart';
  1. 将屏幕包裹在ScreenTimeWidget
ScreenTimeWidget(
  screenName: 'Home Screen',
  child: YourHomeScreenWidget(),
)
  1. 显示汇总
ScreenTimeSummaryWidget();

方法

  • enableDebugMode(): 启用调试模式以记录屏幕时间更新。
  • disableDebugMode(): 禁用调试模式。
  • startTracking(String screenName): 开始对指定屏幕进行计时。
  • stopTracking(String screenName): 停止对指定屏幕进行计时。
  • getTimeSpentOnScreen(String screenName): 获取特定屏幕上的时间。
  • resetScreenTime(): 重置屏幕时间数据。
  • getScreenTimeSummary(): 获取所有屏幕时间的汇总。

示例

以下是如何在您的Flutter应用中使用ScreenTimeTracker的一个简单示例:

import 'package:flutter/material.dart';
import 'package:screen_time_tracker/screen_time_tracker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScreenTimeWidget(
        screenName: 'Home Screen',
        child: Scaffold(
          appBar: AppBar(title: Text('Screen Time Tracker')),
          body: Center(child: Text('Welcome to the Home Screen!')),
        ),
      ),
    );
  }
}

### 作者

此包由[Agniva Maiti](https://github.com/AgnivaMaiti)构建。

更多关于Flutter屏幕时间追踪插件screen_time_tracker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕时间追踪插件screen_time_tracker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用screen_time_tracker插件来追踪屏幕时间的示例代码。这个插件允许你记录用户在特定屏幕上花费的时间。

首先,确保你已经在你的pubspec.yaml文件中添加了screen_time_tracker依赖项:

dependencies:
  flutter:
    sdk: flutter
  screen_time_tracker: ^最新版本号  # 替换为实际的最新版本号

然后,运行以下命令以安装依赖项:

flutter pub get

接下来,创建一个Flutter项目(如果你还没有的话),并在你的项目中实现屏幕时间追踪。以下是一个简单的示例:

main.dart

import 'package:flutter/material.dart';
import 'package:screen_time_tracker/screen_time_tracker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Screen Time Tracker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
  late final ScreenTimeTracker _screenTimeTracker;
  late Timer _timer;
  late DateTime _startTime;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
    _screenTimeTracker = ScreenTimeTracker(screenName: 'HomeScreen');
    _startTime = DateTime.now();

    _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
      _screenTimeTracker.updateTimeSpent();
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    WidgetsBinding.instance?.removeObserver(this);
    _screenTimeTracker.stopTracking();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused || state == AppLifecycleState.inactive || state == AppLifecycleState.detached) {
      _timer.cancel();
      _screenTimeTracker.stopTracking();
    } else if (state == AppLifecycleState.resumed) {
      _startTime = DateTime.now();
      _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
        _screenTimeTracker.updateTimeSpent();
      });
      _screenTimeTracker.startTracking();
    }
    super.didChangeAppLifecycleState(state);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Time Spent on HomeScreen: ${_screenTimeTracker.getTimeSpent().inSeconds} seconds',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen(_screenTimeTracker)),
                );
              },
              child: Text('Go to Second Screen'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatefulWidget {
  final ScreenTimeTracker screenTimeTracker;

  SecondScreen(this.screenTimeTracker);

  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> with WidgetsBindingObserver {
  late final Timer _timer;
  late DateTime _startTime;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
    _startTime = DateTime.now();

    _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
      widget.screenTimeTracker.updateTimeSpent();
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    WidgetsBinding.instance?.removeObserver(this);
    widget.screenTimeTracker.stopTracking();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused || state == AppLifecycleState.inactive || state == AppLifecycleState.detached) {
      _timer.cancel();
      widget.screenTimeTracker.stopTracking();
    } else if (state == AppLifecycleState.resumed) {
      _startTime = DateTime.now();
      _timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {
        widget.screenTimeTracker.updateTimeSpent();
      });
      widget.screenTimeTracker.startTracking();
    }
    super.didChangeAppLifecycleState(state);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(
          'Time Spent on SecondScreen: ${widget.screenTimeTracker.getTimeSpent().inSeconds} seconds',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

说明

  1. 依赖项:在pubspec.yaml文件中添加screen_time_tracker依赖项。
  2. 初始化:在HomeScreenSecondScreeninitState方法中初始化ScreenTimeTracker,并设置每秒更新一次时间的Timer
  3. 生命周期:使用WidgetsBindingObserver监听应用的生命周期状态,以便在应用暂停或恢复时适当地启动或停止计时。
  4. 显示时间:在屏幕上显示用户在该页面上花费的时间。

请注意,screen_time_tracker插件的实际用法可能会因版本更新而略有不同,因此请查阅最新的文档以获取最佳实践。

回到顶部