⭐

Flutterアプリに「評価バー ★★★☆☆」を追加する方法（作業時間：２分）

2023/08/19に公開

Flutter

widget

ratingbar

tech

評価バーとは

chatGPTに聞いてみました。

chatGPT回答:
「評価バー」は、特定の対象や要素に対する評価や評判を示すための視覚的なツールや要素を指す言葉です。評価バーは、情報を視覚的に伝える手段として広く使用され、人々が意思決定をする際に役立ちます。

自分はUIに物足りなさを感じた時に、見栄えUPの目的によく使うようにしています。（下図参照）

↑上図のアプリは下記URLからiOS/Androidそれぞれインストールできます

「評価バー ★★★☆☆」追加対応①「必要パッケージの追加」

以下のパッケージをpubspec.yaml内に追加します。

pubspec.yaml

dependencies:
  flutter_rating_bar: ^4.0.1

「評価バー ★★★☆☆」追加対応②「評価バーの表示について」

評価バーの追加方法は下記になります。
ご自身のプロダクトの必要箇所に下記コードを追記ください。

import 'package:flutter_rating_bar/flutter_rating_bar.dart';



RatingBar.builder(
  initialRating: 3,//表示させたい評価数
  minRating: 0,
  direction: Axis.horizontal, //横方向（verticalにすると縦表示になる）
  allowHalfRating: true, //0.5評価の有効化
  itemCount: 5, //アイコンの数を設定
  itemSize: screen.designH(20.0), //アイコンの大きさ
  ignoreGestures: true, //一切の動作を受け付けなくする（アイコン触っても無反応にしたい時）
  itemPadding: EdgeInsets.symmetric(
  horizontal: 0.1), //アイコン同士の間隔
  itemBuilder: (context, _) => Icon(
  Icons.star,
  color: Colors.amber,//評価した数を表すアイコンの色
  ),
  onRatingUpdate: (rating) {
  //評価が更新されたときの処理を書く
  
  },
  unratedColor: Colors.blue[100],//評価外（評価されていない）アイコンの色を設定
 ),

まとめ

今回ご紹介したパッケージを使うキッカケになった理由が、
①Google Map APIで取得できるデータが意外と少ない（施設名や住所、評価数ぐらいしか使えない）
②利用できるデータが少ない → 施設の評価数の数値だけを表示させるだけだと面白くない淡白な感じなアプリになる → 施設の評価数を視覚的にとらえてもらおう

という流れで実装してみるとアプリっぽくなったのでよかったです。

評価バーとは

「評価バー ★★★☆☆」追加対応①「必要パッケージの追加」

「評価バー ★★★☆☆」追加対応②「評価バーの表示について」

まとめ

Discussion