Flutter评分插件flutter_rating_stars的使用
Flutter评分插件flutter_rating_stars的使用
插件简介
Flutter Rating Stars 是一个用于创建评分条（Rating Bar）的Flutter插件，它能为您的应用添加美观且交互性强的评分功能。通过这个插件，您可以轻松实现水平、垂直以及旋转的星级评分组件。
示例代码
下面是一个完整的示例demo，展示了如何在Flutter项目中使用flutter_rating_stars插件来创建不同样式的评分组件。
完整示例代码
import 'package:flutter/material.dart';
import 'package:flutter_rating_stars/flutter_rating_stars.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double value = 3.5;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Container(
alignment: Alignment.center,
color: Colors.blueGrey,
padding: EdgeInsets.all(36),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 水平示例
Text('Horizontal example'),
RatingStars(
value: value,
onValueChanged: (v) {
setState(() {
value = v;
});
},
starBuilder: (index, color) => Icon(
Icons.accessibility_new,
color: color,
),
starCount: 5,
starSize: 20,
valueLabelColor: const Color(0xff9b9b9b),
valueLabelTextStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontSize: 12.0),
valueLabelRadius: 10,
maxValue: 5,
starSpacing: 2,
maxValueVisibility: true,
valueLabelVisibility: true,
animationDuration: Duration(milliseconds: 1000),
valueLabelPadding:
const EdgeInsets.symmetric(vertical: 1, horizontal: 8),
valueLabelMargin: const EdgeInsets.only(right: 8),
starOffColor: const Color(0xffe7e8ea),
starColor: Colors.yellow,
),
const Divider(height: 10),
// 垂直示例
Text('Vertical example'),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RatingStars(
axis: Axis.vertical,
value: value,
onValueChanged: (v) {
setState(() {
value = v;
});
},
starCount: 5,
starSize: 20,
valueLabelColor: const Color(0xff9b9b9b),
valueLabelTextStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontSize: 12.0),
valueLabelRadius: 10,
maxValue: 5,
starSpacing: 2,
maxValueVisibility: true,
valueLabelVisibility: true,
animationDuration: Duration(milliseconds: 1000),
valueLabelPadding:
const EdgeInsets.symmetric(vertical: 1, horizontal: 8),
valueLabelMargin: const EdgeInsets.only(right: 8),
starOffColor: const Color(0xffe7e8ea),
starColor: Colors.yellow,
),
],
),
const Divider(height: 10),
// 旋转示例
Text('Rotate example'),
RatingStars(
axis: Axis.horizontal,
value: value,
onValueChanged: (v) {
setState(() {
value = v;
});
},
starCount: 5,
starSize: 20,
valueLabelColor: const Color(0xff9b9b9b),
valueLabelTextStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
fontSize: 12.0),
valueLabelRadius: 10,
maxValue: 5,
starSpacing: 2,
maxValueVisibility: true,
valueLabelVisibility: true,
animationDuration: Duration(milliseconds: 1000),
valueLabelPadding:
const EdgeInsets.symmetric(vertical: 1, horizontal: 8),
valueLabelMargin: const EdgeInsets.only(right: 8),
starOffColor: const Color(0xffe7e8ea),
starColor: Colors.yellow,
angle: 12,
),
],
),
),
),
);
}
}
开发环境配置
确保您的开发环境已正确配置以支持Flutter和Dart最新版本：
[√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19045.4291], locale en-US)
• Flutter version 3.19.6 on channel stable at C:\Users\admin\fvm\default
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 54e66469a9 (2 days ago), 2024-04-17 13:08:03 -0700
• Engine revision c4cd48e186
• Dart version 3.3.4
• DevTools version 2.31.1
以上就是关于flutter_rating_stars插件的基本介绍及其用法，希望对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。
更多关于Flutter评分插件flutter_rating_stars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter评分插件flutter_rating_stars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用flutter_rating_stars插件的示例代码。这个插件允许你轻松地在你的应用中添加评分功能。
首先，确保你的Flutter项目已经初始化，并且你已经在pubspec.yaml文件中添加了flutter_rating_stars依赖：
dependencies:
flutter:
sdk: flutter
flutter_rating_stars: ^1.0.0 # 请确保使用最新版本
添加依赖后，运行flutter pub get来安装它。
接下来，在你的Flutter应用中，你可以按照以下步骤使用flutter_rating_stars：
- 导入插件：
在你的Dart文件中（例如main.dart），导入flutter_rating_stars包：
import 'package:flutter/material.dart';
import 'package:flutter_rating_stars/flutter_rating_stars.dart';
- 创建评分组件：
现在，你可以在你的UI中使用RatingStars组件。以下是一个简单的示例，展示了如何在一个页面上显示评分组件，并处理评分变化：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Rating Stars Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RatingStarsPage(),
);
}
}
class RatingStarsPage extends StatefulWidget {
@override
_RatingStarsPageState createState() => _RatingStarsPageState();
}
class _RatingStarsPageState extends State<RatingStarsPage> {
double _rating = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rating Stars Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Current Rating:', style: TextStyle(fontSize: 20)),
SizedBox(height: 10),
RatingStars(
rating: _rating,
size: 40.0,
color: Colors.amber,
borderColor: Colors.grey,
numberOfStars: 5,
starRating: (double rating) {
setState(() {
_rating = rating;
});
},
),
SizedBox(height: 20),
Text('Current rating is $_rating', style: TextStyle(fontSize: 20)),
],
),
),
);
}
}
在这个示例中：
- 我们创建了一个简单的Flutter应用，其中包含一个评分组件。
RatingStars组件的rating属性设置为当前评分（初始为0.0）。size属性设置星星的大小。color属性设置星星被选中时的颜色。borderColor属性设置星星边框的颜色。numberOfStars属性设置星星的数量。starRating是一个回调函数，当用户改变评分时，这个函数会被调用，并且新的评分会作为参数传递进来。我们使用setState来更新当前评分，这样UI就会根据新的评分进行刷新。
运行这个示例，你将会看到一个评分组件，当你点击星星时，评分会更新，并且下面的文本会显示当前的评分。
希望这个示例能够帮助你更好地理解和使用flutter_rating_stars插件！
