Generally speaking, rating bars are widely used by mobile applications to get the users feedback about their satisfaction with the software.
Flutter rating bar is pretty simple and implement and is highly customizable. It provides variety of property to help you customize its appearance and behavior.
In today’s post, we’ll discuss how to create rating bar in flutter
Flutter Rating Bar Example
We’ll use flutter rating bar package to create and customize the rating bar. The very first thing we need to do is to add the dependency to our project.
you can either do that manually by adding the dependency in pubspec.yaml
file right under dependencies section
dependencies:
flutter_rating_bar: ^4.0.1
or use the command
flutter pub add flutter_rating_bar
then run
flutter pub get
Next, you need to import the rating bar library in the dart file where you’ll be creating the rating bar
import 'package:rating_bar_tutorial/rating.dart';
Now We’re ready to start creating the rating bar in our app but let’s first go through some of the common properties of the rating bar
- itemCount: specifies the number of items to be displayed within the rating bar
- initialRating: set the number of rated items when the bar is loaded
- direction: specifies whether the rating bar is displayed horizontally or vertically
- allowHlafRating: if true, enables half rating
- minRating: sets the minimum rating in the bar
- maxRating: sets the maximum rating in the bar
- itemSize: specifies the size of each item within the rating bar. By default, it’s set to 40
- itemPadding: defines the amount of space by which to inset each rating item
- unratedColor: specifies the color for the unrated item in the rating bar
- itemBuilder
- onRatingUpdate: Callback signatures that signal when an underlying value has changed
- ignoreGestures: if true, no gestures will be allowed on the rating bar
- glow: if true, item will glow when it’s touched
- glowColor: specifies the color of the glow when it’s touched
- glowRadius: sets the radius of the glow around the item when it’s touched
- textDirection: It is used to set the text moves from right to left.
- tapOnlyMode: If set to true, the drag-to-rate feature will be disabled. The half-rating capability will be disabled if this mode is enabled
Example
Center( child: RatingBar.builder( itemCount: 5, initialRating: 1, direction: Axis.horizontal, allowHalfRating: true, minRating: 1, maxRating: 5, itemSize: 55, //default 40 itemPadding: const EdgeInsets.symmetric(horizontal: 2.0), unratedColor: Colors.grey[400], itemBuilder: (context, _) => const Icon( Icons.star, color: Colors.amber, ), onRatingUpdate: (rating) => print(rating)), ),
Output
Conclusion
This was a basic explanation on Flutter rating bar. I wish you’re looking forward to learning more about Flutter and discovering its packages. If you have a question or something to add, leave a comment below!.
Please don’t hesitate to support this blog with a like and share if you find its content useful. If you wish to learn more about Flutter programming, you can access a whole Flutter category with plenty of useful topics related to it.
Also, don’t forget to like and share my Facebook page, share the post with those who care to learn, and subscribe to my blog to be one of the firsts to know about my newest posts!
Thank you and happy coding!