Flutter摇晃检测插件shake_flutter的使用

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

Flutter摇晃检测插件shake_flutter的使用

Shake Flutter SDK

pub package

Shake Flutter SDK是一个用于Flutter应用中的错误报告和用户反馈收集的插件，特别支持通过摇晃设备触发反馈提交。它由Shakebugs提供，专注于改善开发者和用户体验。

特性

Feature Available
Bug reporting ✅
Crash reporting ❌
Users ✅

要求

Platform Version
Flutter 1.12
Android 7.0
iOS 12.0

使用方法

安装Shake

要开始使用Shake Flutter SDK，请先在项目的pubspec.yaml文件中添加依赖：

dependencies:
  shake_flutter: ^17.1.0

然后在终端运行以下命令安装包：

flutter packages get

启动Shake

在main.dart文件中调用Shake.start()方法来初始化Shake：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:shake_flutter/shake_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  String apiKey = Platform.isIOS ? 'ios-app-api-key' : 'android-app-api-key';
  await Shake.start(apiKey);

  runApp(MyApp());
}

请将ios-app-api-key和android-app-api-key替换为你从Shake获取的实际API密钥。

示例代码

下面是一个完整的示例代码，展示了如何配置Shake以响应摇晃事件、截图等，并设置回调监听器：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:shake_flutter/shake_flutter.dart';

Future<void> startShake() async {
  // 配置Shake行为
  Shake.setInvokeShakeOnScreenshot(true); // 允许截图时触发
  Shake.setInvokeShakeOnShakeDeviceEvent(true); // 允许摇晃设备时触发
  Shake.setShowFloatingReportButton(true); // 显示浮动报告按钮
  Shake.setAutoVideoRecording(true); // 自动录制视频
  Shake.setShowIntroMessage(true); // 显示介绍信息
  Shake.setSensitiveDataRedactionEnabled(true); // 红字敏感数据
  Shake.setConsoleLogsEnabled(false); // 禁用控制台日志
  Shake.setHomeSubtitle("Flutter Shake example"); // 设置主页副标题

  // 设置监听器
  Shake.setShakeOpenListener(() {
    print('Shake opened!');
  });
  Shake.setShakeDismissListener(() {
    print('Shake dismissed!');
  });
  Shake.setShakeSubmitListener((String type, Map<String, String> fields) {
    print('Shake submitted!');
  });

  // 初始化Shake并注册用户
  String apiKey = Platform.isIOS 
    ? 'zqED60FOrcVXsDBPyXBIUjLetFRg0thRYDQDgMje1qzZvE56VyeiQPC' 
    : 'JAHVv8hcIvifbThYFCuUC167u7u22DhlKKRzlzmo0mJfiAlbU3rFOYo';
  await Shake.start(apiKey);
  Shake.registerUser("test_user");
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await startShake(); // 启动Shake

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Shake Example')),
      body: Center(child: Text('Shake your device to report a bug!')),
    ),
  ));
}

以上代码展示了一个基本的应用程序，其中包含了Shake的初始化和配置，以及一个简单的UI界面。当用户摇晃设备时，会触发Shake界面供用户提交反馈或错误报告。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用shake_flutter插件来实现摇晃检测的示例代码。

首先，你需要在pubspec.yaml文件中添加shake_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  shake_flutter: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用shake_flutter插件：

  1. 导入插件：

在你的Dart文件中（例如main.dart），导入shake_flutter插件：

import 'package:flutter/material.dart';
import 'package:shake_flutter/shake_flutter.dart';
  1. 初始化ShakeDetector：

在你的应用的状态管理类中（例如_MyHomePageState），初始化ShakeDetector并设置摇晃事件的监听器：

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();

    // 初始化ShakeDetector
    ShakeDetector.autoStart(shakeCallback: _onShake);
  }

  // 当检测到摇晃时调用的回调函数
  void _onShake() {
    print("设备被摇晃了！");
    // 在这里添加你的摇晃处理逻辑，比如显示一个Snackbar或者导航到另一个页面
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('检测到摇晃！'),
        duration: Duration(seconds: 1),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('摇晃检测示例'),
      ),
      body: Center(
        child: Text(
          '摇晃你的设备来触发事件',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 停止ShakeDetector
    ShakeDetector.stopListening();
    super.dispose();
  }
}
  1. 完整的主函数和主页面代码：

将上述代码片段整合到你的主函数和主页面类中，如下所示：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter摇晃检测示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();

    // 初始化ShakeDetector
    ShakeDetector.autoStart(shakeCallback: _onShake);
  }

  // 当检测到摇晃时调用的回调函数
  void _onShake() {
    print("设备被摇晃了！");
    // 在这里添加你的摇晃处理逻辑，比如显示一个Snackbar或者导航到另一个页面
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('检测到摇晃！'),
        duration: Duration(seconds: 1),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('摇晃检测示例'),
      ),
      body: Center(
        child: Text(
          '摇晃你的设备来触发事件',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 停止ShakeDetector
    ShakeDetector.stopListening();
    super.dispose();
  }
}

以上代码展示了如何在Flutter应用中使用shake_flutter插件来检测设备的摇晃事件，并在检测到摇晃时显示一个Snackbar。你可以根据需要修改回调函数_onShake中的逻辑来实现其他功能。

回到顶部