[译]Flutter Favorite之方便用户反馈的组件库feedback

本文翻译自pub： feedback | Flutter Package (flutter-io.cn)

译时版本： feedback 2.4.1

---

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-clgiJzP7-1645606839871)(https://rawgit.flutter-io.cn/ueman/feedback/master/img/feedback.svg)]

---

将该库用作商业产品？可以考虑成为赞助者.

---

用于获取更好的反馈的 Flutter 包。它允许用户在应用中直接提供交互反馈，通过注释当前页面的截图或者添加文字。

演示示例

这里有一个交互的 Web 示例在线演示 demo ： 它也含有一个使用该库的简单指南。

动机

要实现很好的用户体验通常是很困难的。创造好的用户体验的最重要因素是获得和听取用户的反馈。Focus groups 是解决该问题的一个方案，但是它很贵。另外一个解决方案是使用该库来获得用户的直接反馈。该库轻量且易于集成，这使你的用户向你发送有价值的反馈变得真正简单。

通过获得带注释图片的反馈，对于来自用户的关于明确特性的问题或者应用的界面，你可以非常容易理解。这就像是在说：一图胜千言。因为文字描述可以用多种方式说明，这样会变得难于理解。

🚀 开始

设置

首先，需要添加 feedback 到 pubspec.yaml 中。最新的版本是 v2.4.1。

dependencies:
  flutter:
    sdk: flutter
  feedback: x.y.z # use the latest version found on pub.flutter-io.cn 

然后，在终端运行 flutter pub get 。

如果 Flutter 是用于 Web，需要使用 flutter build web --web-renderer canvaskit 编译工程。更多关于 CanvasKit 渲染器的信息，请查看 Flutter 文档 。

使用

只需要把应用包裹在 BetterFeedback 组件中。 要显示 feedback 视图，只需调用 BetterFeedback.of(context).show(...); 。 用户提交反馈时，回调会被调用。

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

void main() {
  runApp(
    BetterFeedback(
      child: const MyApp(),
    ),
  );
} 

提供了显示反馈面板的方式，通过调用：

BetterFeedback.of(context).show((UserFeedback feedback) {
  // Do something with the feedback
}); 

提供了隐藏反馈面板的方式，通过调用 BetterFeedback.of(context).hide();

使用 feedback

根据你的使用场景，有很多种方案。这里有一些建议：

GitLab 插件

feedback_gitlab 插件会为用户提交的反馈在 GitLab 创建 issue 。

只需如下面展示的示例来使用。它打开 feedback 的界面，并且在用户提交他的反馈后，自动上传到 GitLab 。

import 'package:feedback_gitlab/feedback_gitlab.dart';

BetterFeedback.of(context).showAndUploadToGitLab(
    projectId: 'project-Id', // Required, use your GitLab project id
    apiToken: 'api-token', // Required, use your GitLab API token
    gitlabUrl: 'gitlab.org', // Optional, defaults to 'gitlab.com'
); 

API 令牌需要访问 read_api 和 write_repository 。查看 GitLab 文档 来获取更多关于 API 令牌的信息。

Sentry 插件

feedback_sentry 会将反馈作为 Sentry 用户反馈向 Sentry 提交。它和 sentry 和