Flutter Rating Dialog Example

In this tutorial, we are going to implement flutter rating dialog in flutter applications. We will integrate and customize this flutter rating dialog using rating_dialog package.

Rating Dialog widget is used to display feedback related information to users. So user can rate our apps and give some feedback so we can improve our app. Using this rating_dialog package, we can also set title and description of this rating dialog. User can also write comments to us for improvement of flutter application.

There are many properties in rating dialog. initialRating parameter is used to set initial rating of rating bar. If we do not set initialRating then Flutter Rating Dialog sets to default 1. ratingColor attribute is used to change color of rating icon.

message property is used to display description of this rating dialog to users. force parameter is used to disable cancel button. So we can force user to leave a rating. onSubmitted property is used to detect when user submits rating and comments. onCancelled callback is used when user cancels rating and close the flutter rating dialog.

 

Add required dependency in your pubspec.yaml file

rating_dialog: ^2.0.0
 
 

Flutter Rating Dialog

import ‘package:flutter/material.dart’;
import ‘package:rating_dialog/rating_dialog.dart’;

class MyRatingDialogScreen extends StatefulWidget {
@override
_MyRatingDialogScreenState createState() => _MyRatingDialogScreenState();
}

class _MyRatingDialogScreenState extends State<MyRatingDialogScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
    child: ElevatedButton(
        child: Text( ‘Rating Dialog’, style: TextStyle(color: Colors.white, fontSize: 25) ),
        style: ElevatedButton.styleFrom(
            primary: Colors.redAccent,
            elevation: 5,
            shape: const BeveledRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(5))),
            padding: EdgeInsets.all(12)
        ),
        onPressed: showRatingDialog,
    ),
),
));
}

void showRatingDialog() {
final ratingDialog = RatingDialog(
    ratingColor: Colors.amber,
    title: ‘Rate this app’,
    message: ‘If you enjoy using this app, would you mind taking a moment to rate it? Thank you for your support!’,
    submitButton: ‘Submit’,
    onCancelled: () => print(‘cancelled’),
    onSubmitted: (response) {
        print(‘rating: ${response.rating}, ‘);
        print(‘comment: ${response.comment}’);
    },
);

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

 
 
flutter rating dialog
 

Leave a Reply