Flutter星级评分插件star_rating的使用

flutter_star_raiting 是一个可定制的Flutter小部件，用于以星形进行评分。您可以设置颜色、大小、数量和星星之间的间距。

示例

示例代码

下面是一个完整的示例 demo，展示了如何在Flutter应用中使用 star_rating 插件。

main.dart

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

void main() => runApp(const StarRatingDemo());

class StarRatingDemo extends StatelessWidget {
  const StarRatingDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Star Rating Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Star Rating Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final int starLength = 7;
  double _rating = 0;

  void _incrementHalfStar() {
    setState(() {
      _rating += 0.5;
      if (_rating > starLength) {
        _rating = starLength.toDouble();
      }
    });
  }

  void _decrementHalfStar() {
    setState(() {
      _rating -= 0.5;
      if (_rating < 0.0) {
        _rating = 0.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Star Rating Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Rating: $_rating / ${starLength.toDouble()}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            StarRating(
              mainAxisAlignment: MainAxisAlignment.center,
              length: starLength,
              rating: _rating,
              between: 5,
              starSize: 30,
              onRaitingTap: (rating) {
                print('Clicked rating: $rating / $starLength');
                setState(() {
                  _rating = rating;
                });
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: _incrementHalfStar,
            tooltip: 'Increment',
            child: const Icon(Icons.arrow_drop_up),
          ),
          FloatingActionButton(
            onPressed: _decrementHalfStar,
            tooltip: 'Decrement',
            child: const Icon(Icons.arrow_drop_down),
          ),
        ],
      ),
    );
  }
}

解释

1. 导入依赖：首先确保在 pubspec.yaml 文件中添加了 star_rating 依赖：

   dependencies:
     flutter:
       sdk: flutter
     star_rating: ^x.x.x # 使用最新版本
   

2. 主函数：定义了一个简单的 main 函数来启动应用。

3. 主页组件：MyHomePage 组件包含状态 _rating 和一些方法来增加或减少评分。

4. 星形评分组件：StarRating 小部件允许用户点击星星来评分，并且可以自定义星星的数量、大小和间距等属性。

5. 浮动按钮：两个浮动按钮分别用来增加和减少评分。

通过上述步骤，您可以在Flutter应用中轻松实现星级评分功能。希望这个示例对您有所帮助！