flutter_rating_bar 1.3.0

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

example/lib/main.dart

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _ratingController = TextEditingController();
  double _rating;
  double _userRating = 3.0;
  bool _customize = false;
  bool _isRTLMode = false;

  @override
  void initState() {
    _ratingController.text = "3.0";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          color: Colors.amber,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Rating Bar'),
        ),
        body: Directionality(
          textDirection: _isRTLMode ? TextDirection.rtl : TextDirection.ltr,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                SizedBox(
                  height: 40.0,
                ),
                Text(
                  "Rating Bar",
                  style: TextStyle(
                    fontWeight: FontWeight.w300,
                    fontSize: 24.0,
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                FlutterRatingBar(
                  initialRating: 2.5,
                  allowHalfRating: true,
                  ignoreGestures: false,
                  tapOnlyMode: false,
                  itemCount: 6,
                  itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
                  //textDirection:
                  //_isRTLMode ? TextDirection.rtl : TextDirection.ltr,
                  fullRatingWidget:
                      _customize ? _image("assets/heart.png") : null,
                  halfRatingWidget:
                      _customize ? _image("assets/heart_half.png") : null,
                  noRatingWidget:
                      _customize ? _image("assets/heart_border.png") : null,
                  onRatingUpdate: (rating) {
                    setState(() {
                      _rating = rating;
                    });
                  },
                ),
                SizedBox(
                  height: 20.0,
                ),
                _rating != null
                    ? Text(
                        "Rating: $_rating",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      )
                    : Container(),
                SizedBox(
                  height: 40.0,
                ),
                Text(
                  "Rating Indicator",
                  style: TextStyle(
                    fontWeight: FontWeight.w300,
                    fontSize: 24.0,
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                FlutterRatingBarIndicator(
                  textDirection:
                      _isRTLMode ? TextDirection.rtl : TextDirection.ltr,
                  rating: _userRating,
                  pathClipper: _customize ? DiamondClipper() : null,
                  itemCount: 5,
                  itemSize: 50.0,
                  emptyColor: Colors.amber.withAlpha(50),
                ),
                SizedBox(
                  height: 20.0,
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: TextFormField(
                    controller: _ratingController,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: "Enter rating",
                      labelText: "Enter rating",
                      suffixIcon: MaterialButton(
                        onPressed: () {
                          setState(() {
                            _userRating =
                                double.parse(_ratingController.text ?? "0.0");
                          });
                        },
                        child: Text("Rate"),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 40.0,
                ),
                Text(
                  "Scrollable Rating Indicator",
                  style: TextStyle(
                    fontWeight: FontWeight.w300,
                    fontSize: 24.0,
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                FlutterRatingBarIndicator(
                  textDirection:
                      _isRTLMode ? TextDirection.rtl : TextDirection.ltr,
                  rating: 8.2,
                  itemCount: 20,
                  itemSize: 30.0,
                  physics: BouncingScrollPhysics(),
                  emptyColor: Colors.amber.withAlpha(50),
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "Switch to custom example",
                      style: TextStyle(
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    Switch(
                      value: _customize,
                      onChanged: (value) {
                        setState(() {
                          _customize = value;
                        });
                      },
                      activeColor: Colors.amber,
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "Switch to RTL Mode",
                      style: TextStyle(
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    Switch(
                      value: _isRTLMode,
                      onChanged: (value) {
                        setState(() {
                          _isRTLMode = value;
                        });
                      },
                      activeColor: Colors.amber,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

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

class DiamondClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final len = size.width;
    path.lineTo(0, 1 / 4 * len);
    path.lineTo(1 / 4 * len, 0);
    path.lineTo(3 / 4 * len, 0);
    path.lineTo(len, 1 / 4 * len);
    path.lineTo(1 / 2 * len, len);
    path.lineTo(0, 1 / 4 * len);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}