How to use the RatingBar indicator in Flutter?

• General

The user’s content can be rated using the Rating Bar, as the name implies. They are largely used by every application, either to gate user comments on their software or to obtain ratings for the content that the application hosts. Applications like IMDB use them to rate films and television shows, while Uber uses them to obtain client input on its services.

A RatingBar is a SeekBar and ProgressBar extension that displays a star rating.

Below is the constructor of the RatingBar.

RatingBar(
{required RatingWidget ratingWidget,
required ValueChanged<double> onRatingUpdate,
Color? glowColor,
double? maxRating,
TextDirection? textDirection,
Color? unratedColor,
bool allowHalfRating = false,
Axis direction = Axis.horizontal,
bool glow = true,
double glowRadius = 2,
bool ignoreGestures = false,
double initialRating = 0.0,
int itemCount = 5,
EdgeInsetsGeometry itemPadding = EdgeInsets.zero,
double itemSize = 40.0,
double minRating = 0,
bool tapOnlyMode = false,
bool updateOnDrag = false,
WrapAlignment wrapAlignment = WrapAlignment.start}
)

Let’s see the properties of the RatingBar widget.

RatingWidget :

Defines the widgets that will be used as the items in the rating bar.

onRatingUpdate :

Callback signatures that signal when an underlying value has changed.

glowColor :

It defines colour for the glow.

maxRating :

Set maximum rating for rating bar.

textDirection :

It is used to set the text moves from right to left.

unratedColor :

Used for the unrated component, defines colours.

allowHalfRating :

Half rating support is enabled by setting true.

direction :

Used to give the direction of the rating bar.(Horizontal or Vertical)

glow :

The Rating Bar item will glow when touched if the value is true.

glowRadius :

This property is used for defining the radius of the glow.

ignoreGestures :

If true, no gestures will be allowed over the rating bar.

initialRating :

Defines the initial rating to be set to the rating bar.

itemCount :

The total number of rating bar items is defined.

itemPadding :

It defines the amount of space by which to inset each rating item.

itemSize :

Defines the dimensions of each rating item in the bar.

minRating :

The set minimum rating for rating bar.

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.

updateOnDrag :

defines whether the onRatingUpdate updates when dragging.

Also Check: How to set up an Emulator For VSCode?

wrapAlignment :

It is used to position the RatingBar item on the main axis.

Take the following actions to develop the RattingBar application:

• Include the dependency in the file pubspec.yaml.
  flutter_rating_bar
• Add the dependencies to main.dart.
• Use the StatefulWidget to give the application structure.
• Put a vertical rating bar there.
• Add a switch to switch the rating bars’ alignment from right to left (RTL)
• Include a switch to switch the rating bar’s alignment from horizontal to vertical.
• Include 3 modes that alter the UI icons.

Example :

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  double? _rating;
  IconData? _selectedIcon;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Builder(
        builder: (context) => Scaffold(
          appBar: AppBar(
            title: const Text('Rating Bar'),
            backgroundColor: Colors.green,
          ),
          body: Center(
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: RatingBar.builder(
                initialRating: _rating ?? 0.0,
                minRating: 1,
                direction: Axis.horizontal,
                allowHalfRating: false,
                itemCount: 5,
                itemSize: 50,
                itemPadding: const EdgeInsets.symmetric(horizontal: 8),
                itemBuilder: (context, _) => Icon(
                  _selectedIcon ?? Icons.star,
                  color: Colors.amber,
                ),
                onRatingUpdate: (rating) {
                  _rating = rating;
                  setState(() {});
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion:

This was a really basic illustration. we implore you to increase the widget’s configurability so that you can alter the background colour of the stars and give it a half-star rating. I hope you liked reading this article.

If you want to develop your application on cross-platform with Flutter, then you consult with experienced Flutter developers who will give you the best app that will run seamlessly.

Frequently Asked Questions (FAQs)

1. How to use the rating bar in Flutter?

First, drag a column widget from the layout elements tab or include it directly from the widget tree. After that, set the cross-axis alignment to start. Icon and height property to 200. Later inside the column, including the text widget.

2. What is the progress bar in Flutter?

A progress bar is a graphical control element that is utilized to view the progress of a task, such as downloading, installing, transferring files, etc. Read the detailed article for the progress bar here.

3. Define the Stateful widget in Flutter

A stateful widget will describe the part of a user interface by developing the constellation of the other widget and expressing the user interface more concretely.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.