Introduction
User feedback collection cannot be overemphasized, therefore, if an app is to grow in both quality and satisfaction, The package offers a developer versatile solutions into making bars rated with icons, emojis, and even custom images. Further, this allows dynamic feedback alerts, hence allowing the user to include as much detail in their feedback as possible and rate your app. This will walk you through the setup and usage of this package, hence you can make full use of its features.
Key Features
- Custom Icon Rating: Use any icon to represent rating units.
- Smiley Emojis Rating: Default emoji images to express ratings.
- Custom Image Rating: Use your custom images for ratings.
- Feedback Alert Box for Low Ratings: Prompt users to provide feedback if they rate low.
- Redirect to Store for High Ratings: Redirect users to the app store for a review if they rate high.
- Customizable UI & Contents: Fully customizable to fit your app’s theme.
- Submission Callback: Get feedback data with a callback function.
Installation
First, add the rating_and_feedback_collector
package to your pubspec.yaml
file:
dependencies:
rating_and_feedback_collector: ^0.0.2
Then, run pub get to fetch the package.
Importing the Package
Next, import the package into your Dart file:
import 'package:rating_and_feedback_collector/rating_and_feedback_collector.dart';
Usage
Here are examples of how to use the package’s main features:
Rating Bar with Icons
The RatingBar
widget allows you to use icons to represent ratings. You can customize the icons, their size, colors, and whether half ratings are allowed.
double _rating = 0.0;
RatingBar(
iconSize: 40, // Size of the rating icons
allowHalfRating: true, // Allows selection of half ratings
filledIcon: Icons.star, // Icon for a filled rating unit
halfFilledIcon: Icons.star_half, // Icon for a half-filled rating unit
emptyIcon: Icons.star_border, // Icon for an empty rating unit
filledColor: Colors.amber, // Color of filled rating units
emptyColor: Colors.grey, // Color of empty rating units
currentRating: _rating, // Set initial rating value
onRatingChanged: (rating) { // Callback triggered when the rating is changed
setState(() { _rating = rating; });
},
),
Rating Bar with Emoji Images
The RatingBarEmoji
widget uses default emoji images to represent ratings.
double _rating = 0.0;
RatingBarEmoji(
imageSize: 45, // Size of image in the rating bar
currentRating: _rating, // Set initial rating value
onRatingChanged: (rating) { // Callback triggered when the rating is changed
setState(() { _rating = rating; });
},
),
Rating Bar with Custom Images
The RatingBarCustomImage
widget allows you to use custom images for different rating levels.
double _rating = 0.0;
RatingBarCustomImage(
imageSize: 45, // Size of image in the rating bar
currentRating: _rating, // Set initial rating value
activeImages: const [
AssetImage('assets/Images/ic_angry.png'),
AssetImage('assets/Images/ic_sad.png'),
AssetImage('assets/Images/ic_neutral.png'),
AssetImage('assets/Images/ic_happy.png'),
AssetImage('assets/Images/ic_excellent.png'),
],
deActiveImages: const [
AssetImage('assets/Images/ic_angryDisable.png'),
AssetImage('assets/Images/ic_sadDisable.png'),
AssetImage('assets/Images/ic_neutralDisable.png'),
AssetImage('assets/Images/ic_happyDisable.png'),
AssetImage('assets/Images/ic_excellentDisable.png'),
],
onRatingChanged: (rating) { // Callback triggered when the rating is changed
setState(() { _rating = rating; });
},
),
Customization Properties
The package offers various properties to customize the rating bar and feedback dialog:
currentRating
(double
): Set initial rating valuefilledIcon
(only forRatingBar
) (IconData?
): Icon for a filled rating unithalfFilledIcon
(only forRatingBar
) (IconData?
): Icon for a half-filled rating unitemptyIcon
(only forRatingBar
) (IconData?
): Icon for an empty rating unitfilledColor
(only forRatingBar
) (Color?
): Color of filled rating unitsemptyColor
(only forRatingBar
) (Color?
): Color of empty rating unitsiconSize
(double?
): Size of the rating iconsonRatingChanged
(Function(double)
): Callback triggered when the rating is changedallowHalfRating
(only forRatingBar
) (bool?
): Allows selection of half ratingsisGoogleFont
(bool?
): Set to true for using Google fontsfontFamilyName
(String?
): Custom font family name or Google font family nameshowFeedbackForRatingsLessThan
(double?
): Threshold rating value below which feedback box is shownfeedbackBoxTitle
(String?
): Title for the feedback boxlowRatingFeedbackTitle
(String?
): Title for feedback options in the low rating feedback boxlowRatingFeedback
(List<String>?
): List of feedback strings for low ratingsshowDescriptionInput
(bool?
): Option to show input box for user descriptions in the feedback dialogdescriptionTitle
(String?
): Title for the description input box in the feedback dialogdescriptionPlaceHolder
(String?
): Placeholder text for the description input boxdescriptionCharacterLimit
(int?
): Character limit for the description inputsubmitButtonTitle
(String?
): Title for the submit button in the feedback dialogonSubmitTap
(Function(selectedFeedback, description)
): Callback function triggered on submission of feedbackshowRedirectToStoreForRatingsGreaterThan
(double?
): Threshold rating value above which the app redirects to the store for a reviewandroidPackageName
(String?
): Android package name for the app, used in the store redirectiosBundleId
(String?
): iOS bundle ID for the app, used in the store redirectinnerWidgetsBorderRadius
(double?
): Border radius for the feedback dialog widgetsalertDialogBorderRadius
(double?
): Border radius for the feedback dialog
Conclusion
Rating_and_feedback_collector Package is the optimal solution for adding highly flexible rating bars and in-app feedback alerts into your Flutter app.
By incorporating this package you can raise user’s interest, collect useful feedback and eventually boost your app’s ratings in the store. Include this package into your app and enjoy its flexible and user-friendly elements.
more information, check out the https://pub.dev/packages/rating_and_feedback_collector
Thanks for reading! If you found this post useful, please share it with others in your network and follow me for more Flutter insights and tutorials. Keep coding and stay awesome!