flutter好用的輪子推薦十六-flutter可自定義的評分組件

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：flutter_rating_bar
• 輪子概述：flutter可自定義的評分組件.
• 輪子做者：sarbagya.me
• 推薦指數：★★★★
• 經常使用指數：★★★
• 效果預覽：

安裝

dependencies:
 flutter_rating_bar: ^3.0.0
複製代碼

import 'package:flutter_rating_bar/flutter_rating_bar.dart';
複製代碼

使用方法

默認效果：

RatingBar(
    initialRating: rate1, //初始評分 double
    allowHalfRating: true,//容許0.5評分
    itemCount: 5,//評分組件個數
    itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
    itemBuilder: (context, _) => Icon(
        Icons.star,
        color: Colors.amber,
    ),
    onRatingUpdate: (rating) {
        setState(() {
            this.rate1=rating;
        });
    },
)
複製代碼

自定義評分樣式：

RatingBar(
    initialRating: rate2,
    direction: Axis.horizontal,
    allowHalfRating: true,
    itemCount: 5,
    ratingWidget: RatingWidget(//自定義評分組件
        full: Image.asset('assets/heart.png',color: Colors.amber,),
        half: Image.asset('assets/heart_half.png',color: Colors.amber,),
        empty: Image.asset('assets/heart_border.png',color: Colors.amber,),
    ),
    itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
    onRatingUpdate: (rating) {
        setState(() {
            this.rate2=rating;
        });
    },
),
複製代碼

使用index控制樣式：

RatingBar(
    initialRating: rate3,
    itemCount: 5,
    itemBuilder: (context, index) {
    switch (index) {
        case 0:
            return Icon(
                Icons.sentiment_very_dissatisfied,
                color: Colors.red,
            );
        case 1:
            return Icon(
                Icons.sentiment_dissatisfied,
                color: Colors.redAccent,
            );
        case 2:
            return Icon(
                Icons.sentiment_neutral,
                color: Colors.amber,
            );
        case 3:
            return Icon(
                Icons.sentiment_satisfied,
                color: Colors.lightGreen,
            );
        case 4:
            return Icon(
                Icons.sentiment_very_satisfied,
                color: Colors.green,
            );
        }
    },
    onRatingUpdate: (rating) {
        setState(() {
            this.rate3=rating;
        });
    },
),
複製代碼

豎方向：

RatingBar(
    initialRating: rate4,
    direction: Axis.vertical,//豎方向
    allowHalfRating: true,
    itemCount: 5,
    itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
    itemBuilder: (context, _) => Icon(
        Icons.star,
        color: Colors.amber,
    ),
    onRatingUpdate: (rating) {
        setState(() {
            this.rate4=rating;
        });
    },
),
複製代碼

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo源碼：github.com/826327700/f…