Flutter评分功能插件rating_widget的使用

简介

rating_widget 是一个简单且可自定义的 Flutter 评分小部件包。它允许开发者轻松地在应用中实现评分功能。

使用方法

添加依赖

首先，在 pubspec.yaml 文件中添加 rating_widget 作为依赖：

dependencies:
  flutter:
    sdk: flutter
  rating_widget:

然后运行以下命令以更新依赖项：

flutter pub get

导入并集成到项目中

在 Dart 文件中导入 rating_widget 并将其添加到应用中：

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

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

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

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

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _horizontalStar = 0; // 水平评分值
  int _verticalSstar = 0;  // 垂直评分值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Column(
        children: [
          // 水平评分条
          Rating(
            rating: 6, // 初始评分为6
            onRatingSelected: (value) {
              setState(() {
                _horizontalStar = value!;
              });
            },
          ),
          const SizedBox(height: 10), // 空白间距
          Text("$_horizontalStar"),   // 显示当前评分

          const SizedBox(height: 50),

          // 垂直评分条（带不同图标和颜色）
          Rating(
            rating: 8, // 初始评分为8
            onRatingSelected: (value) {
              setState(() {
                _verticalSstar = value!;
              });
            },
            horizontal: false, // 设置为垂直方向
            selectedColor: Colors.red, // 选中状态的颜色
            unSelectedColor: Colors.blue, // 未选中状态的颜色
            selectedIcon: Icons.category_sharp, // 选中状态的图标
            unSelectedIcon: Icons.category_outlined, // 未选中状态的图标
          ),
          const SizedBox(height: 10),
          Text("$_verticalSstar"), // 显示当前评分
        ],
      ),
    );
  }
}