Flutter學習 - flutter_rating_bar組件

 flutter_rating_bar組件可以用於顯示用戶的評分。它可以在程序中的任何對象上面運用，例如產品，服務，文章或其他項目的評分。它可以指定評級的最大值，如5星，也可以設置評分的圖標，例如星形圖標，評分可以是可選的或必選的，並且可以指定評分時執行的程式碼。

教學影片:https://www.bilibili.com/video/BV1y44y1o7n4/?vd_source=fa9081c24751e12d42048a4d68c83d90

官網:https://pub.dev/packages/flutter_rating_bar

此組件有三種使用的方法:

(1)使用 RatingBar.builder()，builder裡可以用Icon()回傳你要顯示的圖案

RatingBar.builder(
  initialRating: 0.5,
  //起始評分為3星
  minRating: 1,
  // 拖曳時最小的評分為一星
  maxRating: 5,
  //拖曳時最大的評分為五星
  direction: Axis.horizontal,
  //水平排列
  allowHalfRating: true,
  //允許半顆星評分
  itemCount: 7,
  //預設為五星，如果超過五星，要配合調整上面的itemCount
  itemSize: 30,
  //size的大小
  glowColor: Colors.lightGreen,
  //設定邊緣的顏色
  glowRadius: 5,
  //邊緣的寬度
  glow: true,
  //是否要邊緣色
  updateOnDrag: true,
  //是否要回調update更新
  tapOnlyMode: false,
  //是否可以拖曳 ture為不行拖曳
  ignoreGestures: false,
  //是否使用手勢 ture為不行使用手勢，使用後上面的拖曳也會不行使用

  itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
  itemBuilder: (BuildContext context, int index) {
    return Icon(Icons.star, color: Colors.amber);
  },
  onRatingUpdate: (double value) {
    print('這是回傳的星數值$value');
  },
)),

(2)使用 RatingBar.builder()時，在builder中，會用index來接收由0到最大值的參數，因此如果你想要讓每一個圖案都不一樣，可以透過switch來控制，讓第一個至最後一個評分的標示有不同的圖案，寫法如下:

RatingBar.builder(
    initialRating: 3,
    itemCount: 5,
    itemBuilder: (context, index) {
       switch (index) {
          case 0:  //第一個index為0，回傳的圖示為Icons.sentiment_very_dissatisfied
             return Icon(
                Icons.sentiment_very_dissatisfied,
                color: Colors.red,
             );
          case 1: //第二個index為1，回傳的圖示為Icons.sentiment_dissatisfied
             return Icon(
                Icons.sentiment_dissatisfied,
                color: Colors.redAccent,
             );
          case 2:  //第三個index為2，回傳的圖示為Icons.sentiment_neutral
             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) {
      print(rating);
    },
;

(3)如果不用builder的方法，可以使用下面的方式，直接指定full(已達的星數)、 half(部分等級達到的星數)、empty(未達的星數)

RatingBar(
   initialRating: 3,
   direction: Axis.horizontal,
   allowHalfRating: true,
   itemCount: 5,
   ratingWidget: RatingWidget(
     full: _image('assets/heart.png'),  //全部達到的用這個圖案
     half: _image('assets/heart_half.png'),  //部分達到的用這個圖案
     empty: _image('assets/heart_border.png'),  //沒有達到的用這個圖案
   ),
   itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
   onRatingUpdate: (rating) {
     print(rating);
   },
);