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

bettersun
1,241 阅读4分钟

「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」。

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

译时版本： feedback 2.4.1

feedback.svg

ff.png

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

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

example_0.1.0-beta.gif

演示示例

这里有一个交互的 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 和 sentry_flutter 一起使用。

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

import 'package:feedback_sentry/feedback_sentry.dart';

BetterFeedback.of(context).showAndUploadToSentry(
    name: 'Foo Bar', // optional
    email: 'foo_bar@example.com', // optional
);

其它使用场景

目标注意事项
上传到一个服务器要上传反馈到一个服务器，应该使用例如 MultipartRequest。
通过平台的分享对话框分享share_plus on pub.flutter-io.cn。在示例中也有展示。
FirebaseFirestore， Cloud Storage， Database
JiraJira 有用于创建 issues 和 上传文件的 REST API
TrelloTrello 有用于创建 issues 和 上传文件的 REST API
E-Mail可以使用用户邮件客户端如示例应用使用 flutter_email_sender 插件发送反馈给自己。

如果你有关于如何上传到一个平台的示例代码，我将会非常感谢提一个示例应用的 PR 。

🎨 配置和自定义

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

void main() {
  runApp(
    BetterFeedback(
      child: const MyApp(),
      theme: FeedbackThemeData(
        background: Colors.grey,
        feedbackSheetColor: Colors.grey[50]!,
        drawColors: [
          Colors.red,
          Colors.green,
          Colors.blue,
          Colors.yellow,
        ],
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalFeedbackLocalizationsDelegate(),
      ],
      localeOverride: const Locale('en'),
    ),
  );
}

在下图中可以看到视图对应的 FeedbackThemeData 属性。

image.png

更改本地化文本

可以如下来自定义本地化。如果想要更改一两处文本，先创建你自己的 FeedbackLocalizations 实现，或者现有翻译的子类。然后创建你自己的 GlobalFeedbackLocalizationsDelegate 并且传递给 BetterFeedback 。

class CustomFeedbackLocalizations implements FeedbackLocalizations {
  // ...
}

class CustomFeedbackLocalizationsDelegate
    extends GlobalFeedbackLocalizationsDelegate {
  static final supportedLocales = <Locale, FeedbackLocalizations>{
    // remember to change the locale identifier
    // as well as that defaultLocale (defaults to en) should ALWAYS be
    // present here or overridden
    const Locale('en'): const CustomFeedbackLocalizations(),
  };
}

void main() {
  runApp(
    BetterFeedback(
      child: const MyApp(),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        CustomFeedbackLocalizationsDelegate(),
      ],
    ),
  );
}

💡 提示，技巧和使用场景

  • 可以和该库一起绑定 device_info_plus 和 package_info_plus 以获得关于用户环境的附加信息，就可以更好地理解用户的反馈并调试 issue 。
  • 可以使用 NavigatorObserver 记录用户的浏览，并作为用户反馈的附加内容发送。这样可以知道用户如何到达截图显示的位置。
  • 使用它作为内部的品质控制工具。

⚠️ 已知的 issue 和局限性 

📣 维护者

嗨，我是 Jonas Uekötter 。我创建了这个酷炫的软件。访问我的 GitHub 档案 ，也可以在 Twitter 上关注我。如果你喜欢该库，请给个 kike 或在 Github 上给个 star 。

issue、疑问和贡献

你可以在这里提出 issue 。如果你已经遇到问题，无需犹豫，请在这里提问。 也很欢迎提出贡献。可以在 Github 的 这里进行 PR。请首先看一下 up for grabs 这个 issue 。

avatar
文章
阅读
粉丝