Flutter评分插件flutter_star_bar的使用

在本教程中，我们将展示如何使用flutter_star_bar插件来实现一个简单的评分功能。该插件可以帮助开发者轻松地创建一个可交互的星级评分条。

效果展示

以下是使用flutter_star_bar插件实现的效果：

使用步骤

1. 添加依赖

首先，在您的pubspec.yaml文件中添加flutter_star_bar依赖：

dependencies:
  flutter_star_bar: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 创建评分条

接下来，我们通过一个完整的示例代码展示如何使用flutter_star_bar插件。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_star_bar/flutter_star_bar.dart'; // 导入插件

void main() {
  runApp(const MyApp()); // 应用入口
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'StarBar'), // 主页
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState(); // 定义状态类
}

class _MyHomePageState extends State<MyHomePage> {
  int _star = 0; // 当前选中的星级

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 创建星级评分条
            StarBar(
              maxStarCount: 5, // 最大星级数量
              starCount: _star, // 当前选中的星级
              starSize: 50, // 星星大小
              onStarChanged: (star) { // 点击时触发的回调函数
                setState(() {
                  _star = star.toInt(); // 更新选中的星级
                });
              },
            ),
            Text(
              '$_star', // 显示当前选中的星级
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行应用

将上述代码保存到您的项目中，并运行应用。您将看到一个可以交互的星级评分条，点击星星后，选中的星级会实时更新并在下方显示。

代码详解

1. 导入插件：

   import 'package:flutter_star_bar/flutter_star_bar.dart';

   导入flutter_star_bar插件以便使用星级评分条。

2. 定义主界面：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'StarBar'),
       );
     }
   }

   定义了一个简单的MaterialApp，并设置主页为MyHomePage。

3. 定义状态类：

   class _MyHomePageState extends State<MyHomePage> {
     int _star = 0;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               StarBar(
                 maxStarCount: 5,
                 starCount: _star,
                 starSize: 50,
                 onStarChanged: (star) {
                   setState(() {
                     _star = star.toInt();
                   });
                 },
               ),
               Text(
                 '$_star',
                 style: Theme.of(context).textTheme.headline4,
               ),
             ],
           ),
         ),
       );
     }
   }

   • StarBar组件用于创建星级评分条。
   • maxStarCount：最大星级数量（这里是5颗星）。
   • starCount：当前选中的星级。
   • starSize：星星的大小。
   • onStarChanged：当用户选择星级时触发的回调函数，更新选中的星级。

4. 显示结果：

   Text(
     '$_star',
     style: Theme.of(context).textTheme.headline4,
   )