Flutter用户反馈插件my_feedback的使用

目录

1. 概述
2. 功能
3. 安装
4. 开始使用
5. 使用方法
6. 示例
7. 常见问题
8. 贡献
9. 许可证

概述

my-feedback 是一个帮助开发者无缝收集用户反馈的 Flutter 插件。通过屏幕录制、截图标注和图库上传等功能，该插件简化了识别 Bug 和收集用户建议的过程。

功能

• 屏幕录制: 录制当前应用屏幕并附加到反馈报告中。
• 截图标注: 直接在应用内捕获并标注截图。
• 图库上传: 从用户的设备图库上传图片。

安装

在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  my_feedback: ^1.0.0

然后运行以下命令获取插件：

flutter pub get

Android 配置

1. 在 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

1. 确保您的应用目标 API 级别为 21 或更高。

2. 在 AndroidManifest.xml 文件中添加以下服务配置：

<service
    android:name="com.foregroundservice.ForegroundService"
    android:foregroundServiceType="mediaProjection"/>

iOS 配置

1. 在 Info.plist 文件中添加所需的权限说明：

<key>NSMicrophoneUsageDescription</key>
<string>此应用需要访问麦克风以录制反馈。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>此应用需要访问相册以上传图片。</string>

使用方法

将 MyFeedback 包裹在您的 Material 或 Cupertino 应用中：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MyFeedback(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

通过以下代码启动反馈并接收结果：

MyFeedbackCaller.showFeedbackModalWithResult(context, userId: "user_identifier@gmail.com", onResult: (value) {
  log("数据可用 ${value?.toJson()}");
});

反馈结果返回类型：

• 截图类型：uInt8List 字节
• 视频类型：mp4 文件路径字符串
• 图片类型：jpg 文件路径字符串

示例反馈结果 JSON 数据：

{
  "email_id": "talk2destinyed@gmail.com",
  "message": "hello",
  "feedback_type": "bug",
  "media": [
    {"type": "screenshot", "url": [137, 80, 78, 71, 13, 10, 26]},
    {"type": "video", "url": "/storage/emulated/0/Android/data/com.example.app/cache/my_feedback_record_234.mp4"},
    {"type": "image", "url": "/data/user/0/com.example.app/cache/scaled_pq1hw8.jpg"}
  ]
}

示例

以下是完整的示例代码：

import 'dart:log';

import 'package:flutter/material.dart';
import 'package:my_feedback/my_feedback.dart';
import 'package:my_feedback/provider/feedback_provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MyFeedback(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(
              height: 40,
            ),
            TextButton(
                onPressed: () {
                  setState(() {
                    _counter++;
                  });
                },
                child: Text("增加计数")),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 发送应用反馈
          MyFeedbackCaller.showFeedbackModalWithResult(context, userId: "talk2destinyed@gmail.com", onResult: (value) {
            log("数据可用 ${value?.toJson()}");
          });
        },
        tooltip: '发送反馈',
        child: const Icon(Icons.search),
      ),
    );
  }
}