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

flutter rating bar

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

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 ratingbar

flutterratingbar(
      initialrating: 3,
      fillcolor: colors.amber,
      bordercolor: colors.amber.withalpha(50),
      allowhalfrating: true,
      onratingupdate: (rating) {
           print(rating);
      },
),

5. using flutter ratingbar 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