Flutter Rating Bar: A Customizable and User-Friendly UI Element

Published on by Flutter News Hub

Flutter Rating Bar: A Customizable and User-Friendly UI Element

Overview

The Flutter Rating Bar is a versatile and highly customizable UI element that allows you to incorporate star or other visual representations of ratings into your Flutter applications. It provides exceptional flexibility, enabling you to tailor it to suit your specific design and functional requirements.

Key Features

  • Customization: Personalize the rating bar with any widget, allowing for unlimited design possibilities.
  • Fractional Ratings: Support ratings with fractional values, providing granular feedback.
  • Vertical and Horizontal Layout: Choose the layout orientation that best fits your UI design.
  • Interaction Glow: Engage users with a subtle glow effect when interacting with the rating bar.
  • RTL Mode: Support right-to-left layouts for global accessibility.

Usage

The Flutter Rating Bar can be employed in three distinct ways:

Using RatingBar.builder()

RatingBar.builder(
  initialRating: 3,
  minRating: 1,
  direction: Axis.horizontal,
  allowHalfRating: true,
  itemCount: 5,
  itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
  itemBuilder: (context, _) => Icon(Icons.star, color: Colors.amber),
  onRatingUpdate: (rating) {
    print(rating);
  },
);

Using RatingBar()

RatingBar(
  initialRating: 3,
  direction: Axis.horizontal,
  allowHalfRating: true,
  itemCount: 5,
  ratingWidget: RatingWidget(
    full: _image('assets/heart.png'),
    half: _image('assets/heart_half.png'),
    empty: _image('assets/heart_border.png'),
  ),
  itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
  onRatingUpdate: (rating) {
    print(rating);
  },
);

Using RatingBar.builder() with index

RatingBar.builder(
  initialRating: 3,
  itemCount: 5,
  itemBuilder: (context, index) {
    switch (index) {
      case 0:
        return Icon(Icons.sentiment_very_dissatisfied, color: Colors.red);
      case 1:
        return Icon(Icons.sentiment_dissatisfied, color: Colors.redAccent);
      case 2:
        return Icon(Icons.sentiment_neutral, color: Colors.amber);
      case 3:
        return Icon(Icons.sentiment_satisfied, color: Colors.lightGreen);
      case 4:
        return Icon(Icons.sentiment_very_satisfied, color: Colors.green);
    }
  },
  onRatingUpdate: (rating) {
    print(rating);
  },
);

RatingBar Indicator

The RatingBar Indicator provides a visual representation of a predetermined rating.

RatingBarIndicator(
  rating: 2.75,
  itemBuilder: (context, index) => Icon(Icons.star, color: Colors.amber),
  itemCount: 5,
  itemSize: 50.0,
  direction: Axis.vertical,
);

Vertical Mode

To orient the rating bar vertically, set the direction property to Axis.vertical. For scrollable vertical indicators, use the 'physics' property.

Customization Options

The Flutter Rating Bar offers extensive customization options, allowing you to tailor it to your specific needs:

  • minRating: Set the minimum allowed rating value.
  • maxRating: Set the maximum allowed rating value.
  • initialRating: Specify the default rating value.
  • direction: Choose the orientation of the rating bar (horizontal or vertical).
  • allowHalfRating: Enable or disable fractional rating values.
  • itemCount: Define the number of rating items (e.g., stars).
  • itemPadding: Adjust the spacing between rating items.
  • itemSize: Set the size of individual rating items.
  • itemBuilder: Customize the appearance of individual rating items using any widget.
  • ratingWidget: Create rating items with custom images or widgets.
  • onRatingUpdate: Define a callback function to handle rating updates.

Conclusion

The Flutter Rating Bar is a robust and feature-rich UI element that empowers you to enhance user experience and engagement in your Flutter applications. Its versatility, customization options, and ease of use make it an ideal choice for a wide range of rating scenarios.

Flutter News Hub