Zenn
🙋‍♂️

【Flutter】ユーザーからのより良いフィードバックを受け取ろう

2024/02/21に公開
Flutter
#
レビュー
#
フィードバック
tech

はじめに

普段私は、ユーザーから自分のアプリのフィードバックをいただく窓口はストアのレビューのみでした。
ストアレビューをいただくだけでも開発者としてはモチベーションが上がるものですが、
バグやユーザーの細かい要望に対応するため、より細かいフィードバックが欲しいものです。

そんなとき、アプリ内で手軽にフィードバックを送信することができるパッケージを紹介します。

feedback

https://pub.dev/packages/feedback

アプリ内でフィードバックを送信するためのパッケージで、FlutterFavoriteにも選ばれています。
主な機能は、ユーザーがフィードバックを送信するためのモードが手軽に実装でき、
フィードバック文を書いたり、スクリーンショットを取得できます。
画面右のバーの"Draw"では画面にペイントすることができ、"Navigate"ではアプリを操作することができます。

使い方

まずはrunApp配下にBetterFeedbackを配置し、childとして自分のアプリを設定します。

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

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

ボタン等を押した際の動きを実装します。
これだけでIconButton押下時にフィードバックのモードになります。すご！

IconButton(
  icon: const Icon(Icons.feedback),
  onPressed: () {
    // これを書くだけ
    BetterFeedback.of(context).show((UserFeedback feedback) {});
  },
),
ユーザーのフィードバックを受け取る

ユーザーが入力したフィードバックはUserFeedbackオブジェクトとして渡され、
開発者がアクセスすることができます。

IconButton(
  icon: const Icon(Icons.feedback),
  onPressed: () {
    // これを書くだけ
    BetterFeedback.of(context).show((UserFeedback feedback) {
        // フィードバックのテキスト
        print(feedback.text);
        // フィードバックのスクリーンショット(Unit8List型)
        print(feedback.screenshot);
    });
  },
),

pubdevのfeedbackページでは、Firebaseやメールを利用して開発者がフィードバックを受け取ることを推奨しています。本記事は省略します🙏

IconButton(
  icon: const Icon(Icons.feedback),
  onPressed: () {
    // これを書くだけ
    BetterFeedback.of(context).show((UserFeedback feedback) {
        // フィードバックのテキスト
        print(feedback.text);
        // フィードバックのスクリーンショット(Unit8List型)
        print(feedback.screenshot);

        /*
        ここでFirebaseなどにフィードバックを送信する処理を書く
        */
    });
  },
),
おまけ

フィードバック送信後、通常の画面に戻った後にSnackBarでユーザーにフィードバックの感謝を付けてみました。😊

IconButton(
  icon: const Icon(Icons.feedback),
  onPressed: () {
    // これを書くだけ
    BetterFeedback.of(context).show((UserFeedback feedback) {
        // フィードバックのテキスト
        print(feedback.text);
        // フィードバックのスクリーンショット(Unit8List型)
        print(feedback.screenshot);

        /*
        ここでFirebaseなどにフィードバックを送信する処理を書く
        */

        ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
                content: Text(
                    'フィードバックを送信しました。ご報告ありがとうございます！',
                ),
            ),
        );
    });
  },
),

まとめ

本記事のコードは以下リポジトリで閲覧できます。ご確認ください。
https://github.com/OishiKai/flutter_feedback_test

feedbackを利用することで、ユーザーの要望をより細かく知ることができるようです。
課題があるとすれば、フィードバックを送るための導線づくりが難しいという印象があります。
パッケージを導入するだけでなく、ユーザーにフィードバックを促す工夫が求められます。🤔

WebViewではスクリーンショットを利用できない等の注意点もあるので、
詳しくはpubdevページをご覧ください。
それでは🐮✋

Discussion