How to Add Rating and Feedback using Flutter


Flutter - How to add rating and feedback to android and ios app using flutter

For Beginners out there

Flutter is Free and Open Source project, and is developed and maintained by Google and is one of the reason why we loved Flutter. Flutter provides beautiful pre-build components which are called Widgets in flutter. Everything in flutter is a Widget!


How to add rating and feedback to Android and iOS APP using Flutter?

Let’s get started. Adding Rating and feedback can be time take as you have to develop a custom widget in order to do so.


We got you covered!!


With QuickFeedback adding rating and feedback is quite easy.


Follow Along

Start by adding quick_feedback: to pubspec.yaml file and run the following command.

  flutter pub get
  // This will fetch the Quick feedback package from pub.dev.

Important: Restart the emulator !!

Next step is to use it as per requirement. i.e you can either use it on the dialog or on a new screen. For the purpose of this tutorial we will be using a single button to trigger the feedback and rating on a dialog.

Update your build method in main.dart file as follows:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Quick Feedback'),
        ),
        body: SingleChildScrollView(
          child: Container(
            child: Center(
              child: FlatButton(
                onPressed: () => _showFeedback(context), // this will trigger the feedback modal
                child: Text('Feedback'),
              ),
            ),
          ),
        ),
      ),
    );
  }


Let’s add the _showFeedback dialog.

void _showFeedback(context) {
  showDialog(
    context: context,
    builder: (context) {
      return QuickFeedback(
        title: 'Leave a feedback', // Title of dialog
        showTextBox: true, // default false
        textBoxHint:
            'Share your feedback', // Feedback text field hint text default: Tell us more
        submitText: 'SUBMIT', // submit button text default: SUBMIT
        onSubmitCallback: (feedback) {
          print('$feedback'); // map { rating: 2, feedback: 'some feedback' }
          Navigator.of(context).pop();
        },
        askLaterText: 'ASK LATER',
        onAskLaterCallback: () {
          print('Do something on ask later click');
        },
      );
    },
  );
}

Our final output should look something like the following:

Flutter - How to add rating and feedback to android and ios app using flutter


Find complete example here Give it a try!!

Recommended Posts

Default Enum in Rails 6
Rails 6 provides a way to define default enum value. Let’s see how it works...
Ruby 2.7 adds Enumerable#tally
After introducing the Enumerable#tally method in Ruby 2.7-preview updates. #tally as the name suggests gives...
How to rename column name in Rails
Rails rename_column Rails provides a simple method rename_column which can be used in a migration....