/ Rating

A simple ratingbar for flutter which also include a rating bar indicator

A simple ratingbar for flutter which also include a rating bar indicator

Flutter Rating Bar

A simple yet fully customizable ratingbar for flutter which also include a rating bar indicator, supporting any fraction of rating.

Flutter-Rating-Bar

Usage

1. Depend

Add this to you package's pubspec.yaml file:

dependencies:
  flutter_rating_bar: ^1.1.0

2. Install

Run command:

$ flutter packages get

3. Import

Import in Dart code:

import 'package:flutter_rating_bar/flutter_rating_bar';

4. Using Flutter Rating Bar

FlutterRatingBar(
      initialRating: 3,
      fillColor: Colors.amber,
      borderColor: Colors.amber.withAlpha(50),
      allowHalfRating: true,
      onRatingUpdate: (rating) {
           print(rating);
      },
),

5. Using Flutter Rating Bar Indicator

FlutterRatingBarIndicator(
     rating: 2.75,
     itemCount: 5,
     itemSize: 50.0,
     emptyColor: Colors.amber.withAlpha(50),
),

In order to make the indicator scrollable, just use 'physics' property as in the example.

Customize Rating Bar

FlutterRatingBarIndicator(
    rating: _userRating,
    pathClipper: DiamondClipper(),
    itemCount: 5,
    itemSize: 50.0,
    emptyColor: Colors.amber.withAlpha(50),
),

class DiamondClipper extends CustomClipper<Path> {...}

Customize Rating Bar Indicator

FlutterRatingBar(
     initialRating: 2.87,
     allowHalfRating: true,
     itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
     fullRatingWidget: _image("assets/heart.png") ,
     halfRatingWidget: _image("assets/heart_half.png"),
     noRatingWidget: _image("assets/heart_border.png"),
     onRatingUpdate: (rating) {
         print(rating);
     },
),

Widget _image(String asset) {
    return Image.asset(
      asset,
      height: 30.0,
      width: 30.0,
      color: Colors.amber,
    );
}

Heart Icons are Available Here.

After Customization

custom_example

GitHub