How to create rating bars in Flutter using flutter_rating_bar

The flutter_rating_bar package provides an easy way to implement rating bars in Flutter applications. It allows users to provide ratings and offers various customization options to match the applications design. This post demonstrates how to create a rating bar using the flutter_rating_bar package and showcases several features and properties to customize the rating bar's appearance and behavior.

Installing

To get started with implementing rating bars, we need to install the flutter_rating_bar package into our project. The installation process is simple. Just execute the following command: flutter pub add flutter_rating_bar.

Once the command is executed, make sure to check your pubspec.yaml file for the added dependencies. You should see the flutter_rating_bar package included in the dependencies section, like this:

dependencies:
  flutter:
    sdk: flutter
  flutter_rating_bar: ^4.0.1

Implementation

The easiest way to implement a rating bar using the flutter_rating_bar package is by using its RatingBar widget. Let us go over a basic implementation:

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rating Bar Demo',
      home: MyRatingBar(),
    );
  }
}

class MyRatingBar extends StatelessWidget {
  SnackBar getSnackBar(rating) {
    return SnackBar(
      content: Text(
        'You rated this movie with $rating stars',
        style: TextStyle(fontSize: 20),
        textAlign: TextAlign.center,
      ),
      duration: Duration(seconds: 1),
      backgroundColor: Colors.amber,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rating Bar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Movie rating', style: TextStyle(fontSize: 24)),
            SizedBox(height: 10),
            RatingBar(
              ratingWidget: RatingWidget(
                full: Icon(Icons.star, color: Colors.amber),
                half: Icon(Icons.star_half, color: Colors.amber),
                empty: Icon(Icons.star_border, color: Colors.amber),
              ),
              onRatingUpdate: (rating) => ScaffoldMessenger.of(context)
                  .showSnackBar(getSnackBar(rating)),
            ),
          ],
        ),
      ),
    );
  }
}

In this code snippet, we create a simple Flutter application to demonstrate a rating bar using the flutter_rating_bar package. The application displays a movie rating bar on a single screen. When users interact with the rating bar, a SnackBar appears, showing the selected rating.

The rating bar functionality is implemented in the MyRatingBar class. Inside this class, a SnackBar is created using the getSnackBar() method. The SnackBar has an amber background and lasts for one second.

The build() method of MyRatingBar returns a Scaffold widget, providing the application's basic structure. The Scaffold includes a centered body using a Center widget. Within the Center, a Column stacks the elements vertically.

In the Column widget, a Text widget displays "Movie rating" with a font size of 24. Below the text, a SizedBox adds spacing. The rating bar functionality is introduced using the RatingBar widget. It is configured with a custom RatingWidget, using amber colored star icons from Material Icons (full, half, and empty stars). The onRatingUpdate callback shows the previously defined SnackBar when the user updates the rating. The callback receives the selected rating, and the SnackBar with the chosen rating briefly appears using ScaffoldMessenger.of(context).showSnackBar(). This provides feedback to the user about the selected rating.

Start rating and item count

You can set the initial rating and customize the number of items (stars) in the rating bar using the initialRating and itemCount properties, respectively. For example:

RatingBar(
  initialRating: 3,
  itemCount: 7,
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.amber),
    half: Icon(Icons.star_half, color: Colors.amber),
    empty: Icon(Icons.star_border, color: Colors.amber),
  ),
  onRatingUpdate: (rating) => ScaffoldMessenger.of(context)
      .showSnackBar(getSnackBar(rating)),
),

Highlight color

To change the color of the glowing effect when dragging the rating bar, you can use the glowColor property. For instance:

RatingBar(
  glowColor: Colors.amber,
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.amber),
    half: Icon(Icons.star_half, color: Colors.amber),
    empty: Icon(Icons.star_border, color: Colors.amber),
  ),
  onRatingUpdate: (rating) => ScaffoldMessenger.of(context)
      .showSnackBar(getSnackBar(rating)),
),

Half ratings

To allow half ratings, set the allowHalfRating property to true. For example:

RatingBar(
  initialRating: 3.5,
  allowHalfRating: true,
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.amber),
    half: Icon(Icons.star_half, color: Colors.amber),
    empty: Icon(Icons.star_border, color: Colors.amber),
  ),
  onRatingUpdate: (rating) => ScaffoldMessenger.of(context)
      .showSnackBar(getSnackBar(rating)),
),

Vertical direction

To display the rating bar vertically, set the direction property to Axis.vertical. For instance:

RatingBar(
  direction: Axis.vertical,
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.amber),
    half: Icon(Icons.star_half, color: Colors.amber),
    empty: Icon(Icons.star_border, color: Colors.amber),
  ),
  onRatingUpdate: (rating) => ScaffoldMessenger.of(context)
      .showSnackBar(getSnackBar(rating)),
),

Right to left direction

To display the ratings from right to left, set the textDirection property to TextDirection.rtl. For example:

RatingBar(
  textDirection: TextDirection.rtl,
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.amber),
    half: Icon(Icons.star_half, color: Colors.amber),
    empty: Icon(Icons.star_border, color: Colors.amber),
  ),
  onRatingUpdate: (rating) => ScaffoldMessenger.of(context)
      .showSnackBar(getSnackBar(rating)),
),

Conclusion

The flutter_rating_bar package is a very convenient for creating rating bars in Flutter applications. You can customize the appearance and behavior of the rating bar easily using the RatingBar widget and its properties. For example, you can set the initial ratings, change the number of items (stars), allow half ratings, and more.

Tags

• Flutter
• Dart