How To Easily Create Flutter Rating Bar [Explained With Examples]

flutter rating bar

In this tutorial, we’ll learn how to create an attractive Flutter rating bar. We’ll first see what a rating bar is and after that, we’ll create it and customize its properties. We’ll be using multiple Flutter code examples for the purpose of better understanding.


  1. Introduction: Flutter Rating Bar
  2. Implementing Flutter Rating Bar (Step By Step)
  3. Step 1: Import Flutter Rating Bar Package
  4. Step 2: Using Rating Bar Builder
  5. Step 3: Customize Rating Bar Builder (Detailed Examples)
  6. Custom Flutter Rating Bar Source Code
  7. Conclusion

Introduction: Flutter Rating Bar

Rating bar as the name suggests, it is use to give ratings on something like an app, product or service etc. If we try to create our own rating bar then we can do that as well but to be smart, we’ve to use the available Flutter rating bar package.

Let’s now learn how to import that rating bar package in our app and customize its properties to get a custom rating bar in our Flutter app.

Implementing Flutter Rating Bar (Step By Step)

Follow below steps in order to properly understand how to use and customize rating bar in Flutter app.

Step 1: Import Flutter Rating Bar Package

flutter_rating_bar: ^4.0.1

Import the package in your project’s pubspec.yaml file. Click here to get the latest version.

import 'package:flutter_rating_bar/flutter_rating_bar.dart';
Use the above import statement in the specific dart file where you want to use rating bar.

Step 2: Using Rating Bar Builder

Below block will show the default style of rating bar builder.

Default Rating Bar Builder

              onRatingUpdate: (value) {},
              itemBuilder: (context, index) {
                return Icon(;
flutter rating bar
flutter rating bar builder

We can see that two constructors are mandatory. These are listed below:

On Rating Update – It takes a function with a parameter which stores a double(decimal) value of the selected item.

Item Builder – It is used to return a list of items to be displayed. For demonstration, we’ve passed it a simple Flutter icon widget.

Step 3: Customize Rating Bar Builder (Detailed Examples)

Let’s now customize our rating bar builder using its constructors.

On Rating Update

In the above block, we’ve explained why this is used. Let’s now use it to show the selected rating. For that, we’ll create a double variable and assign the parameter value to that variable and display it. See below code:

double selectedRatingValue = 0.0;
      style: TextStyle(color:, fontSize: 30),

flutter rating bar builder on rating update

Allow Half Rating

This constructor takes a Boolean(true/false) value and is used to allow the user to give a half rating as well. In order to do that, we’ve to click the left side of item. Clicking the right side will specify the whole item. By default, its false. See below code:

allowHalfRating: true
flutter rating bar builder allow half rating

Glow, Glow Color and Glow Radius

Glow constructor is used to specify whether the rating bar item will glow or not, when dragged. Be default, its set to true. Glow color is used to specify the color of glow while the radius constructor specifies the radius. See below code:

glow: true,
glowRadius: 5,

flutter rating bar builder glow color and radius

It’ll show when we drag on the Flutter rating bar.


This constructor is used to specify the direction of rating items. By default it’s horizontal. See below code:

direction: Axis.vertical
flutter rating bar builder direction vertical

Initial Rating

It’s used to specify a default rating. It takes a double(decimal) value but passing it an integer will also work. See below code:

initialRating: 1
flutter rating bar builder initial rating

In the above image, we can see that the value shows 0.0 but first item is colored. This is what initial rating do for us. It’s used to give a default rating value before the user specifies a custom one.

Item Count

It’s used to define the number of rating items. It takes an integer value. By default, its 5. See below code:

itemCount: 6

flutter rating bar builder item count

Item Padding

Its used to specify each rating item with some distance. See below code:

itemPadding: EdgeInsets.all(10)
flutter rating bar builder item padding

Click here if you want to learn Flutter padding in detail.

Min Rating

It’s used to restrict the user to not give ratings below a specific limit. By default, its zero. See below code:

minRating: 1
flutter rating bar builder min rating

Here we can’t give a rating less than 1 even if allow half rating is set to true. Reason is that the minimum rating is set to 1.

Item Size

It’s used to give some specific size to items in Flutter rating bar. It takes a double(decimal) value but passing it an integer will also work just fine. See below code:

itemSize: 30
flutter rating bar builder item size

Tap Only Mode

This constructor takes a Boolean value and its used to remove the drag property and forces only tap to work. By default, its set to false. See below code:

tapOnlyMode: true

Update On Drag

By default, we won’t see any changes in the rating value as we drag. Reason is that update on drag constructor is set to false. Specifying it to true will force the on rating update function to stay updated while the drag occurs. See below code:

updateOnDrag: true

Unrated Color

Its used to specify the color of items that are not rated. See below:


flutter rating bar builder unrated color

Ignore Gestures

This constructor is used to disable the tap/drag from the rating bar. It takes a Boolean value and by default, its false. See below:


Important Note:

In order to change the color of items, we can use their own property like if we are using Flutter icons then we can easily use its color property. See below code:

flutter rating bar builder item color

So this is how we can easily implement and customize Flutter rating bar. Feel free to share it with your developer friends. If you have any questions about Flutter rating bar then feel free to leave comments. We will be more than happy to answer all your questions.

The complete source code of custom Flutter rating bar is given in the below section.

Custom Flutter Rating Bar Source Code

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
void main() {
  runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: HomePage());
class HomePage extends StatefulWidget {
  const HomePage({super.key});
  State<HomePage> createState() => _HomePageState();
class _HomePageState extends State<HomePage> {
  double selectedRatingValue = 0.0;
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        children: [
              allowHalfRating: true,
              glow: true,
              glowRadius: 5,
              direction: Axis.horizontal,
              initialRating: 1,
              itemCount: 7,
              itemPadding: EdgeInsets.all(5),
              minRating: 1,
              itemSize: 30,
              tapOnlyMode: true,
              updateOnDrag: true,
              onRatingUpdate: (value) {
                setState(() {
                  selectedRatingValue = value;
              itemBuilder: (context, index) {
                return Icon(
            padding: EdgeInsets.only(top: 20),
            child: Text(
              style: TextStyle(
                fontSize: 30,


To conclude this tutorial, hope you now have a proper practical understanding of how to use and customize Flutter rating bar. We’ll be looking forward to receive your amazing thoughts on this post.

We’d also be very glad to see you visit our other tutorials on Flutter app development. Thank you for reading this article.

Leave a Comment

Your email address will not be published. Required fields are marked *