Collecting User Feedback in Flutter Using the Feedback Component and Storing Data on Back4app

11min
Introduction
User feedback is essential for developers to understand what works well in their app and what needs improvement. Implementing a feedback mechanism can be time-consuming, but with the feedback package in Flutter, you can quickly set up a feedback panel that allows users to submit text input and annotated screenshots. In this tutorial, we'll show you how to integrate this feedback component into your Flutter app and store the collected feedback in Back4app.
Prerequisites
Before getting started, ensure you have the following:
A Back4app account. Sign up for a free account at Back4app.com.
A Flutter development environment set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Dart, Flutter widgets, and using Back4app for backend services.
Step 1 – Setting Up Your Back4app Backend
Create a Back4app Project: Log in to your Back4app account and create a new project.
Create Parse Classes: For this tutorial, create a Parse Class named UserFeedback to store the feedback submitted by users:
username (String): The name of the user (optional).
feedbackText (String): The text feedback provided by the user.
screenshot (File): The screenshot annotated by the user.
Get Your Back4app Credentials: Navigate to your project settings to retrieve your Application ID and Client Key, which you’ll need to connect your Flutter app to Back4app.
Step 2 – Setting Up the Flutter Project
Create a New Flutter Project: Open your terminal or command prompt and run:
Bash
flutter create feedback_example
flutter create feedback_example
﻿
Add Dependencies: Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  feedback: latest_version
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  feedback: latest_version
  parse_server_sdk_flutter: latest_version
﻿
Run flutter pub get to install these dependencies.
Initialize Parse in Your App: In lib/main.dart, initialize the Parse SDK:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:feedback/feedback.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BetterFeedback(
      child: MaterialApp(
        home: FeedbackScreen(),
      ),
      onFeedbackSubmitted: _sendFeedbackToBackend,
    );
  }

  Future<void> _sendFeedbackToBackend(UserFeedback feedback) async {
    final parseObject = ParseObject('UserFeedback')
      ..set('feedbackText', feedback.text)
      ..set('screenshot', ParseFile(await feedback.screenshot));

    await parseObject.save();
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:feedback/feedback.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BetterFeedback(
      child: MaterialApp(
        home: FeedbackScreen(),
      ),
      onFeedbackSubmitted: _sendFeedbackToBackend,
    );
  }

  Future<void> _sendFeedbackToBackend(UserFeedback feedback) async {
    final parseObject = ParseObject('UserFeedback')
      ..set('feedbackText', feedback.text)
      ..set('screenshot', ParseFile(await feedback.screenshot));

    await parseObject.save();
  }
}
﻿
Replace 'YOUR_BACK4APP_APP_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual Back4app credentials.
Step 3 – Implementing the Feedback Component
Create the FeedbackScreen Widget: In lib/main.dart, create a new screen that allows users to submit feedback:
Dart
class FeedbackScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Feedback Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            BetterFeedback.of(context).show();
          },
          child: Text('Give Feedback'),
        ),
      ),
    );
  }
}
class FeedbackScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Feedback Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            BetterFeedback.of(context).show();
          },
          child: Text('Give Feedback'),
        ),
      ),
    );
  }
}
﻿
This widget displays a simple button that, when pressed, opens the feedback panel.
Customize the Feedback Panel: You can customize the appearance and behavior of the feedback panel by passing additional parameters to the BetterFeedback widget. For instance:
Dart
BetterFeedback(
  child: MaterialApp(
    home: FeedbackScreen(),
  ),
  onFeedbackSubmitted: _sendFeedbackToBackend,
  feedbackTheme: FeedbackThemeData(
    background: Colors.grey[900],
    feedbackSheetColor: Colors.white,
    activeColor: Colors.blue,
    drawingColor: Colors.red,
  ),
)
BetterFeedback(
  child: MaterialApp(
    home: FeedbackScreen(),
  ),
  onFeedbackSubmitted: _sendFeedbackToBackend,
  feedbackTheme: FeedbackThemeData(
    background: Colors.grey[900],
    feedbackSheetColor: Colors.white,
    activeColor: Colors.blue,
    drawingColor: Colors.red,
  ),
)
﻿
This customization allows you to change the colors and style of the feedback panel to match your app’s theme.
Step 4 – Running the App
Run your app using flutter run. You should see the Feedback button displayed on the screen. Clicking it will open the feedback panel, allowing the user to capture a screenshot, annotate it, and provide text feedback.
Verify the data in Back4app by logging into your Back4app dashboard and checking the UserFeedback class. You should see entries corresponding to the feedback submitted from the Flutter app, including the text and the screenshot.
Conclusion
In this tutorial, we demonstrated how to integrate a feedback component into a Flutter app using the feedback package. We also showed how to store the collected feedback, including annotated screenshots, in Back4app. This setup allows you to quickly gather valuable insights from your users, helping you improve your app based on their feedback.
For more information on using Flutter widgets, check out the Flutter documentation, and for backend integration tips, visit the Back4app documentation. Happy coding!
Updated 27 Aug 2024
Did this page help you?
How to Use Segmented Buttons in Flutter with Back4app
Understanding Pattern Matching in Flutter Using Back4app Backend