Getting user feedback is fundamental to further develop your Flutter application. The simpler you make this process the more feedback you will get.
This blog will explore Feedback In Flutter. We will learn how to execute a demo program. We will show how users submit feedback using the feedback package and also how users send feedback via emails using the flutter_email_sender package in your Flutter applications.
For Feedback:
feedback | Flutter package
A Flutter package for getting better feedback. It allows the user to give interactive feedback directly in the app.pub.dev
For Send Emails:
flutter_email_sender | Flutter package
Allows to send emails from flutter using native platform functionality.pub.dev
For path_provider:
path_provider | Flutter package
Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data…pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
The below demo video shows how to get users to submit feedback and how to send feedback via emails in Flutter. How these functions will work using the flutter_email_sender package and feedback package in your Flutter applications. You can see that the entire application will turn into a dialog, this is the very justification for why the BetterFeedback widget ought to be the root widget. Inside the feedback dialog, the user can explore the application, draw the application, and add a description. It will be shown on your device.
Demo Module::
Implementation:
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
feedback: ^3.1.0
flutter_email_sender: ^6.0.3
path_provider: ^2.1.4
Step 2: Import
import 'package:feedback/feedback.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
import 'package:path_provider/path_provider.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: We must also add the following intent to allow our application to send emails on Android. This can be done inside the android\app\src\main\AndroidManifest.xml file.
<queries>
<intent>
<action android:name="android.intent.action.SENDTO" />
<data android:scheme="mailto" />
</intent>
</queries>
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In this code snippet, we start by wrapping the entire application with the BetterFeedback widget. This is required because this widget ought to be the root of the widget tree. In particular, it ought to be over any Navigator widget, including the navigator given by the MaterialApp widget.
void main() => runApp(const BetterFeedback(child: MyApp()));
In the main. dart file, we will make another HomePage() class. In this class, we made another function called _writeScreenshotToStorage to briefly save the screen capture in the user’s storage. We want to do this so it tends to be utilized as an email attachment. Inside the callback of the show function of the BetterFeedback widget, we call the send function of the FlutterEmailSender.
Future<String> _writeScreenshotToStorage(Uint8List screenshot) async {
final directory = await getTemporaryDirectory();
final filePath = '${directory.path}/feedback.png';
final file = File(filePath);
await file.writeAsBytes(screenshot);
return filePath;
}
Now, we will create an ElevatedButton() method. In this method, we can call the accompanying function BetterFeedback.of(context).show open the feedback modal. This function takes an Email instance. For this situation, we added the accompanying ascribes to the Email instance, the attachmentPaths which takes our new function to save the screen capture.
ElevatedButton(
onPressed: () => BetterFeedback.of(context).show(
(UserFeedback feedback) async => FlutterEmailSender.send(
Email(
attachmentPaths: [
await _writeScreenshotToStorage(feedback.screenshot),
],
body: feedback.text,
recipients: ['user@gmail.com'],
subject:
feedback.text.split(' ').take(7).toList().join(' '),
),
),
),
child: const Text('Give Feedback'),
),
We set the body to our feedback description. We have added the beneficiaries which will be the email of the developer and we have added the subject which will be the initial 7 expressions of the feedback message.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:io';
import 'package:feedback/feedback.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
import 'package:flutter_feedback_demo/splash_screen.dart';
import 'package:path_provider/path_provider.dart';
void main() => runApp(const BetterFeedback(child: MyApp()));
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
Future<String> _writeScreenshotToStorage(Uint8List screenshot) async {
final directory = await getTemporaryDirectory();
final filePath = '${directory.path}/feedback.png';
final file = File(filePath);
await file.writeAsBytes(screenshot);
return filePath;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text("Flutter Feedback Demo"),
backgroundColor: Colors.teal.shade100,
centerTitle: true,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Image.asset(
"assets/logo.png",
height: 100,
)),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () => BetterFeedback.of(context).show(
(UserFeedback feedback) async => FlutterEmailSender.send(
Email(
attachmentPaths: [
await _writeScreenshotToStorage(feedback.screenshot),
],
body: feedback.text,
recipients: ['user@gmail.com'],
subject:
feedback.text.split(' ').take(7).toList().join(' '),
),
),
),
child: const Text('Give Feedback'),
),
],
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Feedback in a flutter; you can modify this code according to your choice. This was a small introduction to Send Feedback On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Feedback in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on how to get users to submit feedback and how to send feedback via emails Using the feedback package and flutter_email_sender package in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
