Feedback #

A Flutter package for obtaining better feedback. It allows the user to provide interactive feedback directly in the app, by annotating a screenshot of the current page, as well as by adding text. Get it on pub-web.flutter-io.cn/packages/feedback!

You can view this as a video here.

Motivation #

It is often quite hard to understand user issues with an app. This package aims to support the developer by making it easier for the user to provide good and helpful feedback. Thus this library tries to be pretty easy to use by the user and lightweight to integrate for the developer.

Setup #

First, you will need to add feedback to your pubspec.yaml:

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

Then, run flutter packages get in your terminal.

Getting Started #

Just wrap your app in a BetterFeedback widget. To show the feedback view just call BetterFeedback.of(context).show(...);. The callback gets called when the user submits his feedback.

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

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

Provide a way to show the feedback panel by calling BetterFeedback.of(context)?.show(...); Provide a way to hide the feedback panel by calling BetterFeedback.of(context)?.hide();

Upload feedback #

To upload the feedback you should use, for example, a MultipartRequest.

Configuration #

import 'dart:typed_data';
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: const [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalFeedbackLocalizationsDelegate(),
      ],
      localeOverride: const Locale('en'),
    ),
  );
}

How the properties of FeedbackThemeData correspond to the view can be seen in the following image.

Tips, tricks and usage scenarios #

• You can combine this with device_info and package_info to get additional information about the users environment to better understand his feedback and debug his issues.
• You can record the users navigation with a NavigatorObserver and send it as an addition to the feedback of the user. This way you know how the user got to the location shown in the screenshot.
• Use it as a view for Sentrys user feedback to collect additional user information upon hitting an error.

Known Issues and limitations #

• Platform views are invisible in screenshots (like webview or Google Maps)
• Why does the content of my Scaffold change (gets repositioned upwards) while I'm writing my feedback?
  • Probably because Scaffold.resizeToAvoidBottomInset is set to true. You could set it to false while the user provides feedback.

Known usages #

A list of apps which use this library can be found here.