Rating Dialog In Flutter
Flutter is a Free and Open Source project, and is created and kept up by Google, and is one reason we loved Flutter. Flutter gives lovely pre-built components, which are called Widgets in a flutter. Everything in flutter is a Widget!.
Showing some knowledge to the user is an amazing thought, and that is the most basic that we use dialogs. In Flutter, this astounding UI Toolkit, we have a few different ways to build Dialogs.
In this blog, we will explore the Rating Dialog In Flutter. We will see how to implement a demo program of rating dialog with beautiful and customize using the rating_dialog package in your flutter applications.
rating_dialog | Flutter Package
A beautiful and customizable Rating Dialog package for Flutter! It supports all platforms that flutter supports! To use…pub.dev
Table Of Contents::
Rating Dialog:
Rating dialog is a wonderful and adaptable star Rating Dialog package for Flutter! It supports all stages that flutter supports!. This library is the best as it accompanies a star rating with contact, and even it empowers to swipe rating and glow to star review. It’s named as rating dialog since this library will identify this gesture you make on the flutter star icon to give the rating.
Demo Module :
This demo video shows how to create a rating dialog in a flutter. It shows how the rating dialog will work using the rating_dialog package in your flutter applications. It shows a beautiful and customizable start rating, and it enables to swipe rating to star review. It will be shown on your device.
Properties:
There are some properties of rating dialog are:
- > message: This property is used to the dialog’s message/description text.
- > ratingColor: This property is used to the rating bar (star icon & glow) color.
- > initialRating: This property is used to the initial rating of the rating bar. Default rating is 1.
- > force: This property is used to disables the cancel button and force the user to leave a rating.
- > onSubmitted: This property is used to returns a RatingDialogResponse with the user’s rating and comment values.
- > onCancelled: This property is used to call when the user cancels/closes the dialog.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
rating_dialog:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/images/
Step 3: Import
import 'package:rating_dialog/rating_dialog.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called demo_screen.dart inside the lib folder.
Container(
child: Center(
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.cyan,
padding: EdgeInsets.only(left: 30,right: 30),
child: Text('Rating Dialog',style: TextStyle
(color: Colors.white,fontSize: 15),
),
onPressed: _showRatingAppDialog,
),
),
),
In the body, we will add a container widget. Inside the widget, we will add a center widget, and his child property adds a MaterialButton(). In this button, we will add text, color, button shape, and onPressed method. In this method, we will add a _showRatingAppDialog widget. We will deeply describe it below. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will deeply define _showRatingAppDialog widget
void _showRatingAppDialog() {
final _ratingDialog = RatingDialog(
ratingColor: Colors.amber,
title: 'Rating Dialog In Flutter',
message: 'Rating this app and tell others what you think.'
' Add more description here if you want.',
image: Image.asset("assets/images/devs.jpg",
height: 100,),
submitButton: 'Submit',
onCancelled: () => print('cancelled'),
onSubmitted: (response) {
print('rating: ${response.rating}, '
'comment: ${response.comment}');
if (response.rating < 3.0) {
print('response.rating: ${response.rating}');
} else {
Container();
}
},
);
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => _ratingDialog,
);
}
In the _showRatingAppDialog(), we will add final _ratingDialog is equal to the RatingDialog() plugin. In this dialog, we will add ratingColor mean the rating bar (star icon & glow) color, title, message mean the dialog’s message/description text, image, submitButton mean the submit button’s label/text, onSubmitted mean to returns a RatingDialogResponse with user’s rating and comment values, onCancelled mean call when the user cancels/closes the dialog. Also, we will add showDilaog(). In this dialog, we will add context, barrierDismissible mean set to false if you want to force a rating, and navigated the builder to _ratingDialog. When we run the application, we ought to get the screen’s output like the underneath screen capture.
In this dialog, you will see we will add an image, title, description, star rating, textField for comment, and the last submit button. Also, we will add cancel on the top right corner cross icon.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:rating_dialog/rating_dialog.dart';
class DemoScreen extends StatefulWidget {
@override
_DemoScreenState createState() => _DemoScreenState();
}
class _DemoScreenState extends State<DemoScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal[50],
appBar: AppBar(
backgroundColor: Colors.black,
title: Text('Rating Dialog In Flutter'),
automaticallyImplyLeading: false,
),
body: Container(
child: Center(
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.cyan,
padding: EdgeInsets.only(left: 30,right: 30),
child: Text('Rating Dialog',style: TextStyle
(color: Colors.white,fontSize: 15),
),
onPressed: _showRatingAppDialog,
),
),
),
);
}
void _showRatingAppDialog() {
final _ratingDialog = RatingDialog(
ratingColor: Colors.amber,
title: 'Rating Dialog In Flutter',
message: 'Rating this app and tell others what you think.'
' Add more description here if you want.',
image: Image.asset("assets/images/devs.jpg",
height: 100,),
submitButton: 'Submit',
onCancelled: () => print('cancelled'),
onSubmitted: (response) {
print('rating: ${response.rating}, '
'comment: ${response.comment}');
if (response.rating < 3.0) {
print('response.rating: ${response.rating}');
} else {
Container();
}
},
);
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => _ratingDialog,
);
}
}
Conclusion:
In the article, I have explained the Rating Dialog basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Rating Dialog On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Rating Dialog in your flutter projects. We will show you what the Rating Dialog is?. Some rating dialog properties, make a demo program for working Rating Dialog and show a beautiful and customizable star rating. It enables you to swipe rating and glow to star review using the rating_dialog package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Rating Dialog Demo:
flutter-devs/flutter_rating_dialog_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
