Flutter评分插件smooth_rating_bar的使用

Flutter评分插件smooth_rating_bar的使用

特性

Smooth Flutter Rating Bar允许你自定义评分图标的设计，并且可以为这些图标着色。

使用

要使用此插件，你需要在pubspec.yaml文件中添加smooth_rating_bar作为依赖项：

dependencies:
  smooth_rating_bar: ^版本号

然后，你需要在assets部分添加对应的SVG文件路径：

assets:
  - assets/star/star.svg
  - assets/star/star_half.svg
  - assets/star/star_border.svg
  - assets/star/star_empty_gray.svg

接下来是一个完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double _rating = 2;

  // 设置评分回调函数
  void _setRating(double rating) {
    setState(() {
      _rating = rating;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // 使用SmoothRatingBar组件
        child: SmoothRatingBar(
          rating: _rating, // 当前评分
          color: Colors.yellow, // 已选星星的颜色
          borderColor: Colors.grey[300], // 未选星星的颜色
          onRatingCallback: _setRating, // 评分回调函数
          starCount: 5, // 星星数量
          starPadding: const EdgeInsets.symmetric(horizontal: 10), // 星星间距
          starSize: 15, // 星星大小
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter应用中使用smooth_rating_bar插件的示例代码。这个插件允许你在应用中添加一个平滑的评分条。

首先，你需要在你的pubspec.yaml文件中添加smooth_rating_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  smooth_rating_bar: ^2.2.1  # 确保使用最新版本，请检查pub.dev上的最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Dart文件中使用SmoothStarRating组件。下面是一个完整的示例，展示了如何在一个简单的Flutter应用中集成和使用smooth_rating_bar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smooth Rating Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RatingBarScreen(),
    );
  }
}

class RatingBarScreen extends StatefulWidget {
  @override
  _RatingBarScreenState createState() => _RatingBarScreenState();
}

class _RatingBarScreenState extends State<RatingBarScreen> {
  double _rating = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Smooth Rating Bar Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SmoothStarRating(
              allowHalfRating: true, // 是否允许半星评分
              starCount: 5, // 星星数量
              rating: _rating, // 当前评分
              size: 30.0, // 星星大小
              color: Colors.amber, // 星星颜色
              borderColor: Colors.grey, // 边框颜色
              spacing: 2.0, // 星星间距
              onRated: (double value) {
                // 用户评分改变时的回调
                setState(() {
                  _rating = value;
                });
              },
            ),
            SizedBox(height: 20.0),
            Text(
              'Current Rating: $_rating',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个评分条和一个显示当前评分的文本。SmoothStarRating组件的onRated回调会在用户改变评分时被调用，我们使用setState来更新当前的评分值。

这个示例展示了如何配置SmoothStarRating的一些常用属性，如星星数量、大小、颜色、边框颜色以及是否允许半星评分。你可以根据自己的需求调整这些属性。

回到顶部