You can create a star easily and decide how many angle or color of the star, even the fat and progress of the star.

Overview

零 使用

dependencies:
  flutter_star: $lastVersion

一、描述

目标: 使用canvas手工打造,一个完美的星星评分组件。

---->[StarScore 星星显示组件]----
[1] 比如显示4.2: 会有5颗星, 前四颗填满,后一刻填充20%
StarScore 为 Stateless组件,仅负责显示的需求

---->[CustomRating 星星评分组件]----
[2] 可指定最大值,也就是显示多少个星星
[3] 点击时会改变状态,进行评分,支持半星评分
[4] 支持评分回调

---->[Star组件]----
[5]. 可定义星星的显示进度情况 0% ~ 100 % 无死角
[6]. 可定义星星的角数
[7]. 可定义星星的颜色、大小

二 、StarScore

分数展示组件

名称 类型 功能 备注 默认
score double 分数 - 0
star Star 第四点 星星属性配置 Star()
tail Widget 尾部的组件 - null
StarScore(
  score: 4.8,
  star: Star(
      fillColor: Colors.tealAccent,
      emptyColor: Colors.grey.withAlpha(88)),
  tail: Column(
    children: [
      Text("综合评分"),
      Text("4.8"),
    ],
  ),
),


三 、CustomRating

评分组件

名称 类型 功能 备注 默认
max int 最大星星数 - 5
score double 分数 - 0
star Star 第四点 星星属性配置 Star()
onRating Fluction(double) 点击回调 @required null
1.最简使用

CustomRating(onRating: (s) {
   print(s);
 }),

2.可高度定制

CustomRating(
     max: 6,
     score: 3.0,
     star: Star(
         num: 12,
         fillColor: Colors.orangeAccent,
         fat: 0.6,
         emptyColor: Colors.grey.withAlpha(88)),
    onRating: (s) {
       print(s);
     }),

四 、Star

星星组件 : 高度可定制的配置类

名称 类型 功能 备注 默认
progress double 填充的进度 [0,1] 0.0
num int 星星的角数 大于3 5
fat double 星星的胖瘦 (0,1] 0.5
emptyColor Color 星星的色 - Colors.grey
fillColor Color 星星的填充色 - Colors.yellow
size double 星星的大小 - 20
1. 进度填充:progress


2. 星星的角数:num


3. 星星的胖瘦:fat


4. 星星的颜色:fillColor和emptyColor


You might also like...

A most easily usable cache management library in Dart. With CacheStorage, you can easily manage cache on your application.

A most easily usable cache management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use CacheStorage 1.2.

Dec 13, 2021

A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Apr 7, 2022

A simple modal progress HUD (heads-up display, or progress indicator) for flutter

A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Nov 22, 2022

Flutter package to diplay progress through a milestone progress widget

Flutter package to diplay progress through a milestone progress widget

milestone_progress Flutter package for IOS and Android to display progress through milestone progress widget. Screenshots ## Usage [Example]https://gi

Aug 4, 2020

Wave progress - A custom wave progress widget

Wave progress - A custom wave progress widget

wave_progress_widget A customable wave progress widget Preview How to use Add this to your package's pubspec.yaml file: dependencies: wave_progress_

Jul 18, 2022

Control your week, days, hours, and even minutes. ⏳

Control your week, days, hours, and even minutes. ⏳

Info An advanced, minimalist, and powerful time management application. Where you can create the task, give it a duration, and select which weekdays y

Dec 18, 2022

An android application to find out what is your Myers-Briggs personality type and even what does that mean!

MBTI Application In personality typology, the Myers–Briggs Type Indicator (MBTI) is an introspective self-report questionnaire indicating differing ps

Oct 28, 2022

Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

This Color picker for flutter apps provide picking facility for both single and

Feb 2, 2022
Owner
张风捷特烈
海的彼岸有我未曾见证的风采
张风捷特烈
Kids Restaurant is an app that helps people to decide what to cook either for breakfast

Kids Restaurant is an app that helps people to decide what to cook either for breakfast, lunch, or dinner, the app gives the user variety of recipes in each section and allows the user to display the recipes written or as a video.

Eng-Mohamed Elsayed 3 Dec 19, 2022
Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Jean-Charles Moussé 70 Nov 25, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022
This project is a NGO which let you donate anything or even let you ask for help to people.

ngo_app This app is written in flutter using dart language. Getting Started This project is a NGO which let you donate anything or even let you ask fo

null 1 May 8, 2022
Serialize almost everything you ever need! 📦 Supports serializing MaterialColor, Color, Size, Locale, IconData, UuidValue, DateTime, Directory, File, Duration, and many more.

osum_serializable The goal is to serialize almost everything you ever need! json_serializable is an amazing package to serialize classes but cannot se

Aswin Murali 2 Sep 23, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
meg4cyberc4t 11 Oct 24, 2022
A most easily usable cookie management library in Dart. With SweetCookieJar, you can easily manage cookie on your application.

A most easily usable cookie management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use SweetCookieJar 1

Kato Shinya 9 Oct 27, 2022