DEV Community

saurabh singh aswal
saurabh singh aswal

Posted on

How to add App Rating in Flutter app

Image description

Adding an app rating feature to your app can bring several benefits, both for the app developers and the users. Here are some of the key advantages:

1. User feedback and insights.
2. App visibility and credibility
3. User acquisition and retention
4. App store optimization (ASO)

Image description

Step 1: Create a new Flutter project (if you don’t already have one)
If you don’t have a Flutter project, create one using the following command in your terminal or command prompt:

flutter create your_project_name
cd your_project_name
Enter fullscreen mode Exit fullscreen mode

Step 2: Open the project in your preferred code editor
Open your newly created Flutter project in your code editor. You can use editors like Visual Studio Code, Android Studio, or IntelliJ IDEA. i am using Android Studio.

Step 3: Update pubspec.yaml
The pubspec.yaml file is where you declare the dependencies for your Flutter project. Open the pubspec.yaml file and add the rating_dialog dependency to it.

    sdk: flutter
  rating_dialog: ^2.0.4
  url_launcher: ^6.1.12
Enter fullscreen mode Exit fullscreen mode

Step 4: Use the rating_dialog in your code
Now, you can use the RatingDialog widget to show the rating dialog in your app. For example, let’s show the rating dialog when a button is pressed:

import 'package:flutter/material.dart';
import 'package:rating_dialog/rating_dialog.dart';
import 'package:url_launcher/url_launcher.dart';

final String url = "";
final String packageName = "com.rateuse";

void main() {
  runApp(const App());

class App extends StatefulWidget {
  const App({super.key});

  State<App> createState() => _AppState();

class _AppState extends State<App> {

  Widget build(BuildContext context) {

    return MaterialApp(
      title: "App Rating",
      home: RateUs(),

class RateUs extends StatefulWidget {
  const RateUs({Key? key}) : super(key: key);

  State<RateUs> createState() => _RateUsState();

class _RateUsState extends State<RateUs> {

  final _dialog = RatingDialog(
    initialRating: 1.0,
    // your app's name?
    title: Text(
      'Rating Dialog',
      style: const TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
    // encourage your user to leave a high rating?
    message: Text(
      'Tap a star to set your rating. Add more description here if you want.',
      style: const TextStyle(fontSize: 15),
    // your app's logo?
    image:  const FlutterLogo(size: 100),
    submitButtonText: 'Submit',
    commentHint: 'Set your custom comment hint',
    onCancelled: () => print('cancelled'),
    onSubmitted: (response) {
      print('rating: ${response.rating}, comment: ${response.comment}');

      // TODO: add your own logic
      if (response.rating < 3.0) {
        // send their comments to your email or anywhere you wish
        // ask the user to contact you instead of leaving a bad review
      } else {

  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFe91e63),
          title: Text('Rate Us',style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
          centerTitle: true,
        body: Center(
            child:  DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(colors: [
                      //add more colors
                    borderRadius: BorderRadius.circular(5),
                    boxShadow: <BoxShadow>[
                          color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
                          blurRadius: 5) //blur radius of shadow
                    style: ElevatedButton.styleFrom(
                      primary: Colors.transparent,
                      onSurface: Colors.transparent,
                      shadowColor: Colors.transparent,
                      //make color or elevated button transparent
                    onPressed: (){
                        context: context,
                        barrierDismissible: true, // set to false if you want to force a rating
                        builder: (context) => _dialog,
                    child: Padding(
                        top: 5,
                        bottom: 5,
                      child:Text("Give Us Rating",style: TextStyle(color: Colors.white),),


Future _launchUrl() async {
  final Uri _url = Uri.parse(url+packageName);
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');

Enter fullscreen mode Exit fullscreen mode

If you explore and go deeper into this topic so check out my new article on this topic which is explained briefly 👇👇👇

In conclusion, by following the steps above, you have successfully added the “rating_dialog” package version 2.0.4 to your Flutter app. You can now use the RatingDialog widget to show a rating dialog and gather user feedback or ratings for your app. Remember to stay up-to-date with the package documentation and updates to utilize any new features or improvements that might have been introduced in newer versions.

Top comments (0)