How To Create a Rating Dialog in Flutter

Rating dialog in Flutter is a widget that is used to allow users to rate apps and give some feedback to the developers. It lets the user rate the app using a rating bar in and write a comment to the developer. It is a customizable star rating dialog that is built using rating dialog package.

Rating is pretty handy for developers as it provides them the chance to know if the user is satisfied with their software and where they can improve it. Rating can be achieved using rating bar as well as rating dialog which we’ll be discussing today.

So, without further ado, let’s start our fantastic tutorial!

Preparing your project

We’ll start by adding the package to our flutter app project. As I always mention, you can either do this manually by adding the package inside pubspec.yaml file under the dependencies section

dependencies:
  rating_dialog: ^2.0.4

or by running the pub add command as follows

flutter pub add rating_dialog

Then run the pub get command like below

flutter pub get

Once done, import the rating dialog library in dart file where you want to implement the dialog

import 'package:rating_dialog/rating_dialog.dart';

Before we start creating the rating dialog, we need to understand few properties.

1. initial rate: specifies the rate when the dialog is loaded in the beginning.
2. starSize: defines the size of the rating stars.
3. starColor: specifies the color for the rating stars.
4. enableComment: if true, dialog will contain a comment section for the user to write their feedback.
5. commentHint: specifies the hint message displayed in the comment area.
6. title: specifies the title displayed at the top of the dialog.
7. message: defines the text message displayed under the dialog title.
8. submitButtonText: the text displayed on the submit button.
9. onSubmitted: specifies the action taken when the submit button is pressed by the user.

Now, let’s create a function to create the rating dialog and customize it. Once we create it, we’ll display it using showDialog method that we usually use to display a usual alert dialog.

void showRatingDialog() {
  final ratingDialog = RatingDialog(
    initialRating: 1,
    starSize: 40,
    starColor: Colors.pink,
    enableComment: true,
    commentHint: 'Write your feedback here',
    title: const Text('Rate This App', textAlign: TextAlign.center ,style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
    message: const Text('Please rate us, and give us a comment!', style: TextStyle(fontSize: 16)),
    submitButtonText: 'Submit',
    onSubmitted: (response ) {
      //submit the rate
    },

  );
  
  showDialog(context: context, builder: (context) => ratingDialog);
}

Then, we’ll create an ElevatedButton to show the rating dialog when it’s clicked.

ElevatedButton(
  onPressed: showRatingDialog,
  child: const Text('Show Dialog', style: TextStyle(fontSize: 20)),
  style:  ElevatedButton.styleFrom(
      elevation: 5,
      shape: const BeveledRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(5))),
      padding: EdgeInsets.all(12)
  ),

Output

Conclusion

This was a basic illustration on rating dialogs in Flutter. I wish you’re looking forward to learning more about Flutter and discovering its packages. If you have a question or something to add, leave a comment below!

Please don’t hesitate to support this blog with a like and share if you find its content useful. If you wish to learn more about Flutter programming, you can access a whole Flutter category with plenty of useful topics related to it.

Also, don’t forget to like and share my Facebook page, share the post with those who care to learn, and subscribe to my blog to be one of the firsts to know about my newest posts!

Thank you and happy coding!