Flutter 评分条

一个简单但完全可自定义的 Flutter 评分条，还包含一个评分条指示器，支持任何小数评分。

Flutter-Rating-Bar

用法

1. 依赖

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  flutter_rating_bar: ^1.1.0

2. 安装

运行命令

$ flutter packages get

3. 导入

在 Dart 代码中导入

import 'package:flutter_rating_bar/flutter_rating_bar';

4. 使用 Flutter 评分条

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

5. 使用 Flutter 评分条指示器

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

要使指示器可滚动，只需使用 `physics` 属性，如示例所示。

自定义评分条

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

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

自定义评分条指示器

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,
    );
}

心形图标在此处可用。

自定义后

custom_example

GitHub

https://github.com/sarbagyastha/flutter_rating_bar