How To Create Rating Bar in Flutter

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

1. itemCount: specifies the number of items to be displayed within the rating bar
2. initialRating: set the number of rated items when the bar is loaded
3. direction: specifies whether the rating bar is displayed horizontally or vertically
4. allowHlafRating: if true, enables half rating
5. minRating: sets the minimum rating in the bar
6. maxRating: sets the maximum rating in the bar
7. itemSize: specifies the size of each item within the rating bar. By default, it’s set to 40
8. itemPadding: defines the amount of space by which to inset each rating item
9. unratedColor: specifies the color for the unrated item in the rating bar
10. itemBuilder
11. onRatingUpdate: Callback signatures that signal when an underlying value has changed
12. ignoreGestures: if true, no gestures will be allowed on the rating bar
13. glow: if true, item will glow when it’s touched
14. glowColor: specifies the color of the glow when it’s touched
15. glowRadius: sets the radius of the glow around the item when it’s touched
16. textDirection: It is used to set the text moves from right to left.
17. 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!