Flutter分数指示插件score_indicator的使用

score_indicator 是一个用于在 Flutter 中展示评分或总数的图形化指示器。它支持自定义颜色、数量和得分，并且可以灵活地适应不同的需求。

特性

ScoreIndicator(
  label: Text('Rating'),
  count: 5,
  score: 3,
  radius: 8.0,
  filledIndicatorColor: Colors.red,
  emptyIndicatorColor: Colors.blue,
);

注意事项：

• 如果未提供 radius，则默认值为 4.0。
• 如果未提供 emptyIndicatorColor，则默认值为 Colors.grey。
• score 必须不大于 count 并且不能为负数。
• count 和 radius 必须大于 0。

完整示例

以下是一个完整的示例，展示了如何使用 score_indicator 插件来创建一个动态的评分指示器。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ScoreIndicator Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter ScoreIndicator Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color? _filledColor = Colors.blue;
  Color? _emptyColor = Colors.grey;
  int count = 5, score = 1;
  double radius = 6;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('填充颜色'),
            DropdownButton<Color>(
              isExpanded: true,
              value: _filledColor,
              items: _colors,
              onChanged: (color) {
                setState(() {
                  _filledColor = color;
                });
              },
            ),
            Text('空颜色'),
            DropdownButton<Color>(
              isExpanded: true,
              value: _emptyColor,
              items: _colors,
              onChanged: (color) {
                setState(() {
                  _emptyColor = color;
                });
              },
            ),
            Text('得分'),
            Slider(
              min: 0,
              max: count.toDouble(),
              value: score.toDouble(),
              onChanged: (value) {
                setState(() {
                  score = value.toInt();
                });
              },
            ),
            Text('总数'),
            Slider(
              min: 1,
              max: 5,
              value: count.toDouble(),
              onChanged: (value) {
                setState(() {
                  if (value < score) {
                    score = value.toInt();
                  }
                  count = value.toInt();
                });
              },
            ),
            Text('半径'),
            Slider(
              min: 2,
              max: 8,
              value: radius,
              onChanged: (value) {
                setState(() {
                  radius = value;
                });
              },
            ),
            ScoreIndicator(
              label: Text(
                '这是描述该指示器用途的标签',
              ),
              count: count,
              score: score,
              radius: radius.toDouble(),
              emptyIndicatorColor: _emptyColor!,
              filledIndicatorColor: _filledColor!,
            ),
          ],
        ),
      ),
    );
  }

  List<DropdownMenuItem<Color>> get _colors {
    Map<String, Color> colors = {
      '蓝色': Colors.blue,
      '红色': Colors.red,
      '橙色': Colors.orange,
      '绿色': Colors.green,
      '灰色': Colors.grey,
    };

    List<DropdownMenuItem<Color>> _list = [];

    colors.forEach((key, value) {
      _list.add(
        DropdownMenuItem(child: Text(key), value: value),
      );
    });

    return _list;
  }
}