In this blog, we will learn how to Implement In App Feedback In Flutter in Flutter.
You may also check our Flutter app development company page.
Introduction:-
This guide will walk you through setting up and utilizing the feedback package, exploring use cases, and customizing the experience.
Users can provide interactive feedback by annotating screenshots and adding text within the app.
Implementation:-
First, we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.
|
1 2 3 4 |
dependencies: flutter: sdk: flutter feedback: ^3.1.0 |
Now, run the command “flutter pub get” to add the dependencies.
Add the following package to your class.
|
1 2 |
import 'package:feedback/feedback.dart'; |
Integration in main.dart:-
Wrap your app in a BetterFeedback widget and call BetterFeedback.of(context).show(…) to display the feedback view. The callback function is called after the user submits their feedback.
|
1 2 3 4 |
void main() { runApp( const BetterFeedback( child: MyApp() )); } |
Showing and Handling Feedback:-
To display the feedback view, you can use the “BetterFeedback.of(context).show(…)” method.
To manage user feedback effectively, it is recommended to create a callback function that can handle it appropriately.
|
1 2 3 4 |
BetterFeedback.of(context).show((UserFeedback feedback) { // Do something with the feedback }); |
Hiding the Feedback Panel
Please provide a simple and efficient method to hide the feedback panel.
|
1 |
BetterFeedback.of(context).hide |
Completed Code:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
import 'dart:io'; import 'dart:typed_data'; import 'package:feedback/feedback.dart'; import 'package:flutter/material.dart'; import 'package:flutter_redux/flutter_redux.dart'; import 'package:path_provider/path_provider.dart'; import 'package:redux/redux.dart'; import 'package:share_plus/share_plus.dart'; class ReduxAppState { int counter; ReduxAppState({this.counter = 0}); } enum Actions { incrementCounter, decrementCounter } ReduxAppState appReducer(ReduxAppState state, dynamic action) { if (action == Actions.incrementCounter) { return ReduxAppState(counter: state.counter + 1); } else if (action == Actions.decrementCounter) { return ReduxAppState(counter: state.counter - 1); } return state; } final store = Store<ReduxAppState>( appReducer, initialState: ReduxAppState(), ); class ReduxStateManagement extends StatelessWidget { const ReduxStateManagement({super.key}); @override Widget build(BuildContext context) { return StoreProvider<ReduxAppState>( store: store, child: Scaffold( appBar: AppBar( backgroundColor: Colors.deepPurple, title: const Text( 'Feedback', style: TextStyle(color: Colors.white), ), ), body: Center( child: StoreBuilder<ReduxAppState>( builder: (context, store) { return Column( mainAxisAlignment: MainAxisAlignment.start, children: [ SizedBox( height: MediaQuery.of(context).size.height / 3, ), Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.all(8), decoration: BoxDecoration( border: Border.all(), borderRadius: BorderRadius.circular(4), color: Colors.deepPurple, ), child: IconButton( onPressed: () { store.dispatch(Actions.decrementCounter); }, icon: const Icon( Icons.remove, size: 28, color: Colors.white, )), ), Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( border: Border.all(), borderRadius: BorderRadius.circular(4)), child: Text( 'Counter: ${store.state.counter}', style: const TextStyle(fontSize: 24), ), ), Container( margin: const EdgeInsets.all(8), decoration: BoxDecoration( border: Border.all(), borderRadius: BorderRadius.circular(4), color: Colors.deepPurple, ), child: IconButton( onPressed: () { store.dispatch(Actions.incrementCounter); }, icon: const Icon( Icons.add, size: 28, color: Colors.white, )), ), ], ), const SizedBox( height: 18, ), ElevatedButton( style: ElevatedButton.styleFrom( foregroundColor: Colors.deepPurple), child: const Text('Provide feedback via platform sharing', style: TextStyle(color: Colors.deepPurple)), onPressed: () { BetterFeedback.of(context).show( (feedback) async { final screenshotFilePath = await writeImageToStorage(feedback.screenshot); await Share.shareFiles( [screenshotFilePath], text: feedback.text, ); }, ); }, ), ], ); }, ), ), ), ); } Future<String> writeImageToStorage(Uint8List feedbackScreenshot) async { final Directory output = await getTemporaryDirectory(); final String screenshotFilePath = '${output.path}/feedback.png'; final File screenshotFile = File(screenshotFilePath); await screenshotFile.writeAsBytes(feedbackScreenshot); return screenshotFilePath; } } |
Output:-
In App Feedback In Flutter
Users can provide interactive feedback by annotating screenshots and adding text within the app.
Conclusion:-
In this blog, we discuss how to effectively implement the feedback of applications using the feedback library.
You can also check other blogs from here.
Thanks for reading this blog ❤️
Hope this blog helped you to better understand how to Implement In App Feedback In Flutter in Flutter.