How to create rating bar dialog in Flutter App

Published July 13, 2020

In this Flutter Tutorial we will discuss and implement show 5 star rating review in our flutter application

For this we are using smooth_start_ratingbar library 
This library is the best library as it comes with star rating with touch and even it’s enable to swipe rating to star review. It’s named as smooth star rating because this library will detech this gesture you make on the  flutter star icon to give the rating.

This are the feature of this library:

Change the default star icons with your desired Icons.

Give user to rate using half rate or full ( Eg : 2.5 rating or  4.5 rating )

swiping on icon will increment/decrement the rating bar star.

and many more feature.

 

  • Supports replacing default star icons with desired IconData
  • Supports half rate and full rate (1.0 or 0.5)
  • Swipe for incrementing/decrementing rate amount
  • Change star body and boundary colors independently
  • Control size of the star rating
  • Set your desired total Star count
  • Supports click-to-rate
  • Spacing between stars

 

Installation smooth  star rating 
Add dependencies

open pubspec.yaml and all the following dependencies line

dev_dependencies:
  smooth_star_rating: 1.1.1

 

Then, just click on package_get this will download all the required classes in your flutter project.

Import the package class file
Then, after adding  the library, you need to import the smooth_star_rating.dart  wherever you need to show star review rating bar

import 'package:smooth_star_rating/smooth_star_rating.dart';


 

Constructor

SmoothStarRating(
               rating: rating,
               size: 35,
               filledIconData: Icons.star,
               halfFilledIconData: Icons.star_half,
               defaultIconData: Icons.star_border,
               starCount: 5,
               allowHalfRating: false,
               spacing: 2.0,
               onRatingChanged: (value) {
                 setState(() {
                   rating = value;
                 });
               },
             ),

 

Properties

allowHalfRating                 -   Whether to use whole number for rating(1.0  or 0.5)
onRatingChanged(int rating)     -   Rating changed callback
starCount                       -   The maximum amount of stars
rating                          -   The current value of rating
size                            -   The size of a single star
color                           -   The body color of star
borderColor                     -   The border color of star
spacing                         -   Spacing between stars(default is 0.0)
filledIconData                  -   Full Rated Icon
halfFilledIconData              -   Half Rated Icon
defaultIconData                 -   Default Rated Icon

 

Flutter Rating dialogbox

 

Flutter Rating Dialog

Installation of Flutter rating dialog plugin

dev_dependencies:
  rating_dialog: ^1.0.0

 

Then, just click on package_get this will download all the required classes in your flutter project.

Import the package class file
Then, after adding  the library, you need to import the rating_dialog.dart  whereever you need to show rating dialog box

import 'package:rating_dialog/rating_dialog.dart'

 

ConstructorshowDialog(
        context: context,
        barrierDismissible: true, // set to false if you want to force a rating
        builder: (context) {
          return RatingDialog(
            icon: const Icon(
              Icons.star,
              size: 100,
              color: Colors.blue,
            ), // set your own image/icon widget
            title: "Flutter Rating Dialog",
            description: "Tap a star to give your rating.",
            submitButton: "SUBMIT",
            alternativeButton: "Contact us instead?", // optional
            positiveComment: "We are so happy to hear ????", // optional
            negativeComment: "We're sad to hear ????", // optional
            accentColor: Colors.blue, // optional
            onSubmitPressed: (int rating) {
              print("onSubmitPressed: rating = $rating");
              // TODO: open the app's page on Google Play / Apple App Store
            },
            onAlternativePressed: () {
              print("onAlternativePressed: do something");
              // TODO: maybe you want the user to contact you instead of rating a bad review
            },
          );
        });

 

Complete code

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Ratingbar',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  double rating = 4.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("App Rating stars")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "Smooth Star Rating ",
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(
                height: 10,
              ),
              SmoothStarRating(
                rating: rating,
                size: 35,
                filledIconData: Icons.star,
                halfFilledIconData: Icons.star_half,
                defaultIconData: Icons.star_border,
                starCount: 5,
                allowHalfRating: true,
                spacing: 2.0,

                onRated: (value) {
                  setState(() {
                    rating = value;
                    print(rating);
                  });
                },
              ),
              Text(
                "You have Selected : $rating Star",
                style: TextStyle(fontSize: 15),
              ),
              SizedBox(
                height: 15,
              ),
              Text(
                "Rating Dialog ",
                style: TextStyle(fontSize: 20, color: Colors.deepOrange),
              ),
              RaisedButton(
                onPressed: () {
                  show();
                },
                child: Text("Open Flutter Rating Dialog Box"),
              )
            ],
          ),
        ));
  }
  void show() {
    showDialog(
        context: context,
        barrierDismissible: true, // set to false if you want to force a rating
        builder: (context) {
          return RatingDialog(
            icon: const Icon(
              Icons.fastfood,
              size: 100,
              color: Colors.amber,
            ), // set your own image/icon widget
            title: "Flutter Rating Dialog",
            description: "Tap a star to give your rating.",
            submitButton: "SUBMIT",
            alternativeButton: "Contact us instead?", // optional
            positiveComment: "We are so happy to hear ????", // optional
            negativeComment: "We're sad to hear ????", // optional
            accentColor: Colors.green, // optional
            onSubmitPressed: (int rating) {
              print("onSubmitPressed: rating = $rating");
              // TODO: open the app's page on Google Play / Apple App Store
            },
            onAlternativePressed: () {
              print("onAlternativePressed: do something");
              // TODO: maybe you want the user to contact you instead of rating a bad review
            },
          );
        });
  }
}

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

3586 Views