【flutter_rating_bar】評価バーを実装しよう！【flutter】

flutter_rating_bar ? どんなパッケージなんだろう？

5つ星とかの評価バーを簡単に実装したいわ！

本記事ではそんな疑問、要望にお答えします！

Flutter で 5つ星評価などを行う評価バーを実装するのに役立つパッケージ、
flutter_rating_bar パッケージの紹介を行います。

基本的な使い方から、カスタマイズ方法まで詳細に解説します。

以下のようなUIを簡単に作成することが可能です。

ぜひ読んでみてください！

基本的な使い方
1. 準備
2. 実装
カスタマイズ方法
まとめ
参考
編集後記（2022/4/21）

基本的な使い方

準備

まず準備として、パッケージのインストールと、
Dartファイルへのインポート文の追加を行います。

パッケージのインストール

CLI(macならターミナル)で、自分のプロジェクトのルートにて
以下のコマンドを実行しパッケージをインストールします。

flutter pub add flutter_rating_bar

パッケージのインポート

実装したいDartファイルの上部に以下のインポート文を追加し、
パッケージをインポートします。

import 'package:flutter_rating_bar/flutter_rating_bar.dart';

実装

実装方法について解説します。

評価バーを実装したい場所に、RatingBar.builderを配置します。
itemBuilderにて評価アイコンとして設定したいWidgetを、
onRatingUpdateにて評価が更新された際の処理を書きます。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(Icons.star),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
        ),

以上が基本的な使い方となります！

カスタマイズ方法

色や配置等の評価バーのカスタマイズ方法を解説します！

配置のカスタマイズ

アイコンの数

itemCountプロパティにてアイコンの数を設定することが可能です。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(Icons.star),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
          itemCount: 7,
        ),

方向

directionプロパティにて評価バーを縦方向、横方向に設定可能です。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(Icons.star),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
          direction: Axis.vertical,
        ),

アイコンサイズとPadding

itemSizeプロパティにて、アイコンの大きさを設定可能です。

また、itemPaddingプロパティでアイコン間の隙間の大きさを設定することができます。

色のカスタマイズ

評価した数を表すアイコンの色

評価したアイコンの色はitemBuilderで設定したWidgetに依存します。
以下はアイコンの色を黄色に設定した例です。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(
            Icons.star,
            color: Colors.yellow,
          ),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
        ),

評価外の数を表すアイコンの色

unratedColorプロパティにて評価外（評価されていない）アイコンの色を設定することが可能です。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(Icons.star),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
          unratedColor: Colors.blue[100],
        ),

動作のカスタマイズ

0.5の評価の有効化

allowHalfRating プロパティをtrueに設定することで、0.5の評価の有効化ができます。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(Icons.star),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
          allowHalfRating: true,
        ),

初期値の設定

initialRating プロパティに数値を設定することで、
初期状態での評価値を設定することが可能です。

        RatingBar.builder(
          itemBuilder: (context, index) => const Icon(Icons.star),
          onRatingUpdate: (rating) {
            //評価が更新されたときの処理を書く
          },
          initialRating: 3,
        ),