How to create rating bar dialog in Flutter App
Published July 13, 2020In 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: |
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( |
Properties
|
allowHalfRating - Whether to use whole number for rating(1.0 or 0.5) |
Flutter Rating Dialog
Installation of Flutter rating dialog plugin
|
dev_dependencies: |
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( |
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 :
|
|
|
|
|
3668 Views |
|