How to add App Rating in Flutter app
Tags: flutter, android, dart, webdev
Published: 2023-08-05 07:02:38


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqro3ljyhsi0rz1gfaxx.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpn1x2zh3j9gg3nz657s.gif)

**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
```

**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.

```
dependencies:
  flutter:
    sdk: flutter
  rating_dialog: ^2.0.4
  url_launcher: ^6.1.12
```

**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 = "http://play.google.com/store/apps/details?id=";
final String packageName = "com.rateuse";

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

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  @override
  Widget build(BuildContext context) {


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

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

  @override
  State<RateUs> createState() => _RateUsState();
}


class _RateUsState extends State<RateUs> {





  final _dialog = RatingDialog(
    initialRating: 1.0,
    // your app's name?
    title: Text(
      'Rating Dialog',
      textAlign: TextAlign.center,
      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.',
      textAlign: TextAlign.center,
      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 {
        _launchUrl();
      }
    },
  );

  @override
  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: [
                      Color(0xFFFF800B),
                      Colors.redAccent,
                      Color(0xFFCE1010),
                      //add more colors
                    ]),
                    borderRadius: BorderRadius.circular(5),
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                          color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
                          blurRadius: 5) //blur radius of shadow
                    ]
                ),
                child:ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.transparent,
                      onSurface: Colors.transparent,
                      shadowColor: Colors.transparent,
                      //make color or elevated button transparent
                    ),
                    onPressed: (){
                      showDialog(
                        context: context,
                        barrierDismissible: true, // set to false if you want to force a rating
                        builder: (context) => _dialog,
                      );
                    },
                    child: Padding(
                      padding:EdgeInsets.only(
                        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');
  }
}

```
If you explore and go deeper into this topic so check out my new article on this topic which is explained briefly 👇👇👇
https://dosomthings.com/how-to-add-app-rating-in-flutter-app/

**Conclusion:**
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.