搜索分类、插件与代码仓

animated_rating_stars 封面
插件详情v1.0.1

animated_rating_stars

一个高度可定制的Flutter评分条小部件,用于交互式星形评分。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
2160
喜欢数
54
Pub 分数
140

安装插件

flutter pub add animated_rating_stars

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个可自定义的 Flutter 小部件,用于交互式基于星星的评分,具有平滑动画效果。它允许用户通过动画星星直观地选择评分,支持单次和连续评分模式。该小部件高度可配置,可自定义星星大小、颜色、间距和动画效果。适用于跨多个平台的反馈表单、评论和用户评估。

适合场景

  • 用户评论系统
  • 产品评分界面
  • 反馈收集表单
  • 互动调查
  • 应用审核部分

主要特点

  • 平滑的动画星星过渡
  • 可自定义的星星外观
  • 支持连续和离散评分
  • 跨平台兼容性
  • 与 Flutter 的轻松集成
  • 可配置的点击行为

适合对象

  • 应用中的评分控件
  • 交互式反馈组件
  • 移动和网络应用
  • 寻求视觉吸引力的设计人员
  • 需要轻量级解决方案的开发人员

使用建议

  • 有限的内置验证
  • 默认情况下没有样式
  • 需要手动处理评分状态
  • 动画性能在低端设备上可能有所不同
  • 不适用于非星级评分类型

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Animated Rating Stars for Flutter

Package Version Package Downloads GitHub Stars GitHub Forks License

AnimatedRatingStars is a highly customizable animated rating bar widget for Flutter. It allows users to interactively provide ratings by tapping on stars. The package offers a wide range of customization options and is designed to be easy to integrate into your Flutter applications.

Demo

DEMO1 DEMO2 DEMO3

Features

  • Create animated rating bars with filled, half-filled, and empty stars.
  • Customize star colors, icons, sizes, and animation parameters.
  • Display the rating value and enable interactive tooltips for half-filled stars.
  • Supports both read-only and interactive modes.

Installation

To use this package, add animated_rating_stars as a dependency in your pubspec.yaml file:

dependencies:
  animated_rating_stars: ^1.0.1

Then, run flutter pub get to fetch the package.

Usage

Import the package in your Dart code:

import 'package:animated_rating_stars/animated_rating_stars.dart';

Now, you can use the AnimatedRatingStars widget in your Flutter app:

AnimatedRatingStars(
  initialRating: 3.5,
  minRating: 0.0,
  maxRating: 5.0,
  filledColor: Colors.amber,
  emptyColor: Colors.grey,
  filledIcon: Icons.star,
  halfFilledIcon: Icons.star_half,
  emptyIcon: Icons.star_border,
  onChanged: (double rating) {
    // Handle the rating change here
    print('Rating: $rating');
  },
  displayRatingValue: true,
  interactiveTooltips: true,
  customFilledIcon: Icons.star,
  customHalfFilledIcon: Icons.star_half,
  customEmptyIcon: Icons.star_border,
  starSize: 30.0,
  animationDuration: Duration(milliseconds: 300),
  animationCurve: Curves.easeInOut,
  readOnly: false,
)

Customize the properties according to your requirements. The onChanged callback is called when the rating changes.

For more examples and usage details, refer to the examples directory included with this package.

Customization

You can customize the appearance and behavior of the rating bar using the following properties:

  • initialRating: The initial rating value.
  • minRating: The minimum rating value.
  • maxRating: The maximum rating value.
  • filledColor: The color for filled stars.
  • emptyColor: The color for empty stars.
  • filledIcon: The icon used for filled stars.
  • halfFilledIcon: The icon used for half-filled stars.
  • emptyIcon: The icon used for empty stars.
  • displayRatingValue: Show or hide the rating value.
  • interactiveTooltips: Enable interactive tooltips for half-filled stars.
  • customFilledIcon: Use a custom icon for filled stars.
  • customHalfFilledIcon: Use a custom icon for half-filled stars.
  • customEmptyIcon: Use a custom icon for empty stars.
  • starSize: Set the size of each star.
  • animationDuration: Adjust the duration of the animation when the rating changes.
  • animationCurve: Define the animation curve for the rating change.
  • readOnly: Make the widget read-only.

Customization

Contributions and feedback are welcome! If you encounter any issues or have feature requests, please open an issue on GitHub.

License

This package is distributed under the MIT License. See LICENSE for details.

For more Flutter packages and development resources, visit pub.dev.

所属分类

依赖

依赖清单 1 项

  • plugin_platform_interface^2.0.2

源码仓库

使用此插件的项目