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

import 'package:flutter_rating_bar/flutter_rating_bar.dart';

RatingBar.builder(
              onRatingUpdate: (value) {},
              itemBuilder: (context, index) {
                return Icon(Icons.star);
              })

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;

Text(
      selectedRatingValue.toString(),
      style: TextStyle(color: Colors.blue, fontSize: 30),
            )

Allow Half Rating

allowHalfRating: true

Glow, Glow Color and Glow Radius

glow: true,
glowRadius: 5,
glowColor: Colors.red,

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

Direction

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

direction: Axis.vertical

initialRating: 1

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

Item Padding

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

itemPadding: EdgeInsets.all(10)

minRating: 1

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.

itemSize: 30

tapOnlyMode: true

updateOnDrag: true

unratedColor: Colors.green.shade100

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:

ignoreGestures:true

Icon(
        Icons.star,
        color: Colors.blue,
                )

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);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: HomePage());
  }
}
class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  double selectedRatingValue = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RatingBar.builder(
              allowHalfRating: true,
              glow: true,
              glowRadius: 5,
              glowColor: Colors.red,
              direction: Axis.horizontal,
              initialRating: 1,
              itemCount: 7,
              itemPadding: EdgeInsets.all(5),
              minRating: 1,
              itemSize: 30,
              tapOnlyMode: true,
              updateOnDrag: true,
              unratedColor: Colors.green.shade100,
              ignoreGestures:true,
              wrapAlignment: WrapAlignment.center,
              onRatingUpdate: (value) {
                setState(() {
                  selectedRatingValue = value;
                });
              },
              itemBuilder: (context, index) {
                return Icon(
                  Icons.star,
                  color: Colors.blue,
                );
              }),
          Padding(
            padding: EdgeInsets.only(top: 20),
            child: Text(
              selectedRatingValue.toString(),
              style: TextStyle(
                color: Colors.blue,
                fontSize: 30,
              ),
            ),
          )
        ],
      )),
    );
  }
}