A simple ratingbar for flutter which also include a rating bar indicator supporting any fraction of rating

Flutter Rating Bar

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

DEMO

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 Indicator

CUSTOM_DEMO

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.

Customize Rating Bar

CUSTOM_DEMO

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

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

DiamondClipper can be found here.

 

Credit (github url) : https://github.com/sarbagyastha/flutter_rating_bar

Next Article : https://flutterappdev.com/2019/04/04/flutter-buttons-for-facebook-google-and-twitter-sign-in/

Leave a Reply

Your email address will not be published.