Flutter评分插件smooth_star_rating_null_safety的使用

Flutter评分插件smooth_star_rating_null_safety的使用

在您的Flutter项目中添加依赖：

dependencies:
    ...
    smooth_star_rating: 1.0.4+2

使用示例

首先，导入smooth_star_rating包：

import 'package:smooth_star_rating/smooth_star_rating.dart';

然后，在您的应用中使用SmoothStarRating组件：

SmoothStarRating(
  allowHalfRating: false, // 是否允许半星评级
  onRatingChanged: (v) { // 评分改变时的回调函数
    rating = v;
    setState(() {}); // 更新UI
  },
  starCount: 5, // 星星的数量
  rating: rating, // 当前评分值
  size: 40.0, // 星星的大小
  filledIconData: Icons.blur_off, // 已填满星星的图标
  halfFilledIconData: Icons.blur_on, // 半填满星星的图标
  color: Colors.green, // 星星的颜色
  borderColor: Colors.green, // 星星边框颜色
  spacing: 0.0, // 星星之间的间距
)

构造函数参数

allowHalfRating                 - 是否允许半星评级（1.0 或 0.5）
onRatingChanged(int rating)     - 评分改变时的回调函数
starCount                       - 最大星星数量
rating                          - 当前的评分值
size                            - 单个星星的大小
color                           - 星星的填充颜色
borderColor                     - 星星的边框颜色
spacing                         - 星星之间的间距（默认为0.0）
filledIconData                  - 已填满星星的图标
halfFilledIconData              - 半填满星星的图标
defaultIconData                 - 默认星星的图标

截图

完整评分

半星评分

MIT LICENSE

如果您发现任何问题或建议，请告诉我。感谢！

完整示例代码

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var rating = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '评分栏演示',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: SmoothStarRating(
          rating: rating,
          size: 65,
          filledIconData: Icons.star,
          halfFilledIconData: Icons.star_half,
          defaultIconData: Icons.star_border,
          starCount: 5,
          allowHalfRating: false,
          spacing: 2.0,
          onRatingChanged: (value) {
            setState(() {
              rating = value;
            });
          },
        )),
      ),
    );
  }
}

更多关于Flutter评分插件smooth_star_rating_null_safety的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter评分插件smooth_star_rating_null_safety的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


SmoothStarRating 是一个用于在 Flutter 应用中显示和选择评分的插件。它支持空安全（null safety）版本，并且易于集成到你的应用中。以下是使用 smooth_star_rating_null_safety 插件的步骤和示例代码。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 smooth_star_rating_null_safety 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  smooth_star_rating_null_safety: ^1.0.4

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 smooth_star_rating_null_safety 包：

import 'package:smooth_star_rating_null_safety/smooth_star_rating_null_safety.dart';

3. 使用 SmoothStarRating 组件

SmoothStarRating 组件提供了多种自定义选项，以下是一个简单的示例：

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

class RatingExample extends StatefulWidget {
  [@override](/user/override)
  _RatingExampleState createState() => _RatingExampleState();
}

class _RatingExampleState extends State<RatingExample> {
  double rating = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Smooth Star Rating Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SmoothStarRating(
              rating: rating,
              size: 50,
              filledIconData: Icons.star,
              halfFilledIconData: Icons.star_half,
              defaultIconData: Icons.star_border,
              starCount: 5,
              allowHalfRating: true,
              spacing: 2.0,
              onRated: (value) {
                setState(() {
                  rating = value;
                });
                print("Rating Value -> $value");
              },
            ),
            SizedBox(height: 20),
            Text(
              'Rating: $rating',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: RatingExample(),
  ));
}
回到顶部