Flutter用户不活跃检测插件user_inactivity_detector的使用

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

Flutter用户不活跃检测插件user_inactivity_detector的使用

用户不活跃检测简介

用户不活跃检测插件 (user_inactivity_detector) 可以检测用户在应用中的不活跃状态。例如,在一个银行应用中,如果用户在30秒内没有进行任何操作,该插件可以自动锁定设备。这个插件通过设置延迟时间来触发 onStopped 函数。

参数概览

  • Duration duration: 设置延迟时间,当用户在指定时间内没有操作时,将执行 onStopped 函数。
  • Function onStopped: 当用户不活跃时,此函数将被调用。
  • bool enabled: 如果为 true,一切正常工作;如果为 false,则停止工作(例如,可以在执行后禁用)。

使用示例

  1. 初始化 您需要将其提供给根 widget。
import 'package:flutter/material.dart';
import 'package:user_inactivity_detector/service/timer_service.dart';
import 'package:user_inactivity_detector/service/timer_service_provider.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TimerServiceProvider(
      service: TimerService(),
      child: MaterialApp(
        title: 'Flutter Smart Detector',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: YourHome(),
      ),
    );
  }
}
  1. 示例使用 onStopped 函数将在用户闲置2秒后触发。
import 'package:flutter/material.dart';
import 'package:user_inactivity_detector/user_inactivity_detector.dart';

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: UserInactivityDetector(
        duration: const Duration(seconds: 2),
        onStopped: () {
          print('stopped');
        },
        child: SingleChildScrollView(
          child: Column(
            children: List.generate(
              30,
              (index) => ListTile(
                title: Text(index.toString()),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

完整 demo 示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Smart Detector',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  [@override](/user/override)
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  bool _isUserActive = true;

  void _onStopped() {
    setState(() {
      _isUserActive = false;
    });
    print('stopped');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Inactivity Detector'),
      ),
      body: UserInactivityDetector(
        duration: const Duration(seconds: 2),
        onStopped: _onStopped,
        child: Center(
          child: ElevatedButton(
            onPressed: () {
              if (_isUserActive) {
                print('active');
              } else {
                print('inactive');
              }
            },
            child: Text('Toggle Activity'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter用户不活跃检测插件user_inactivity_detector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter用户不活跃检测插件user_inactivity_detector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用user_inactivity_detector插件的一个示例代码案例。这个插件能够帮助你检测用户的不活跃状态。

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

dependencies:
  flutter:
    sdk: flutter
  user_inactivity_detector: ^x.y.z  # 请将x.y.z替换为当前最新版本号

然后运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例,展示如何设置和使用UserInactivityDetector

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter User Inactivity Detector Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late UserInactivityDetector _userInactivityDetector;

  @override
  void initState() {
    super.initState();
    
    // 初始化UserInactivityDetector
    _userInactivityDetector = UserInactivityDetector(
      inactivityDuration: Duration(seconds: 30), // 设置不活跃时间阈值,例如30秒
      onUserInactive: _onUserInactive,
      onUserActive: _onUserActive,
    )..startListening(); // 开始监听用户活动状态
  }

  @override
  void dispose() {
    _userInactivityDetector.stopListening(); // 停止监听
    super.dispose();
  }

  void _onUserInactive() {
    // 用户变为不活跃状态时的处理逻辑
    print("User is inactive");
    // 例如,可以显示一个提示或者执行其他操作
  }

  void _onUserActive() {
    // 用户变为活跃状态时的处理逻辑
    print("User is active");
    // 例如,可以重置计时器或者隐藏提示
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Inactivity Detector Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Watch for user inactivity!',
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个UserInactivityDetector实例,并设置了不活跃时间阈值为30秒。当用户在不活跃状态超过30秒时,会触发_onUserInactive方法;当用户再次变为活跃状态时,会触发_onUserActive方法。

你可以根据实际需求在_onUserInactive_onUserActive方法中添加具体的处理逻辑,例如显示提示信息、锁定屏幕或者执行其他相关操作。

希望这个示例代码能够帮助你更好地理解如何在Flutter项目中使用user_inactivity_detector插件。

回到顶部