【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Flutter】評価バー(rating_bar)を実装し、評価数、方向、サイズ、余白、色、初期評価数を変更するまでの完全ガイド!

【Flutter】評価バー(rating_bar)を実装し、評価数、方向、サイズ、余白、色、初期評価数を変更するまでの完全ガイド!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • flutter_rating_barパッケージのFlutterプロジェクトへの追加方法
  • 評価バーの基本的な実装方法
  • 合計評価数、方向、サイズ、余白、色、初期評価数をカスタマイズする方法
  • 0.5単位での評価を可能にする設定方法
  • 評価外の色のカスタマイズ方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
  • flutter_rating_bar 4.0.1
目次

評価バー実装の事前準備

pubspec.yamlファイルに依存関係を追加する

dependencies:
  flutter:
    sdk: flutter
  flutter_rating_bar: ^4.0.1
  • この設定を追加したら、ターミナルでflutter pub getを実行し、パッケージをプロジェクトにインストールします。これで、flutter_rating_barのセットアップは完了です。

評価バーの基本的な実装

概要

flutter_rating_barを使用して評価バーを実装する基本的な方法から始めましょう。評価バーをウィジェットとして画面に追加するには、以下のようなコードをアプリ内ソースコードの評価バーを実装したい場所に記述します。

サンプルコード

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('評価バーのデモ'),
        ),
        body: Center(
          child: RatingBar.builder(
            initialRating: 3,
            minRating: 1,
            direction: Axis.horizontal,
            allowHalfRating: true,
            itemCount: 5,
            itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
            itemBuilder: (context, _) => Icon(
              Icons.star,
              color: Colors.amber,
            ),
            onRatingUpdate: (rating) {
              print(rating);
            },
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 1行目〜2行目: 必要なパッケージをインポートします。
  • 6行目: MyAppクラスの定義を開始します。
  • 8行目〜33行目: MyAppクラスでウィジェットツリーを定義します。この例ではMaterialAppを使用しています。
  • 10行目〜31行目: Scaffoldウィジェットを使用してアプリバーとボディを定義しています。
  • 14行目〜30行目: Centerウィジェットを使って、評価バー(RatingBar.builder)を画面中央に配置しています。
  • 15行目〜29行目: RatingBar.builderを使用して評価バーをカスタマイズしています。初期評価数(initialRating)、最小評価数(minRating)、方向(direction)、半数評価の許可(allowHalfRating)、アイテムの数(itemCount)、アイテム間のパディング(itemPadding)、アイテムビルダー(itemBuilder)、評価更新時のコールバック(onRatingUpdate)を設定しています。

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装する

合計評価数の変更

概要

合計評価数を変更するには、RatingBar.builderウィジェットのitemCountプロパティを変更します。たとえば、評価バーに10個の星を表示したい場合は、itemCountを10に設定します。

サンプルコード

RatingBar.builder(
  itemCount: 10,
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 2行目:itemCount: 10で評価バーに10個の星を表示してます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、合計評価数を変更する

方向の変更

概要

評価バーの方向を変更するには、directionプロパティをAxis.horizontalまたはAxis.verticalに設定します。デフォルトは水平方向(Axis.horizontal)です。

サンプルコード

RatingBar.builder(
  direction: Axis.vertical,
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 2行目:direction: Axis.verticalで評価バーの方向を縦に変更してます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、方向を変更する

サイズの変更

概要

評価バーの星のサイズを変更するには、itemBuilder内でIconウィジェットのsizeプロパティを設定します。

サンプルコード

child: RatingBar.builder(
            initialRating: 3,
            minRating: 1,
            direction: Axis.horizontal,
            allowHalfRating: true,
            itemCount: 5,
            itemSize: 50,
            itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
            itemBuilder: (context, _) => Icon(
              Icons.star,
              color: Colors.amber,
            ),
            // 他のプロパティは省略
          ),

サンプルコードの解説

  • 7行目:itemSize: 50で星のアイコンのサイズを50にしてます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バーを実装し、サイズを変更する

余白の設定

概要

星の間の余白を設定するには、itemPaddingプロパティを使用します。

サンプルコード

RatingBar.builder(
  itemPadding: EdgeInsets.symmetric(horizontal: 10.0), // 水平方向の余白を10に設定
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 2行目:itemPadding: EdgeInsets.symmetric(horizontal: 10.0)で水平方向の余白を10に設定してます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、余白の設定をする

色の変更

概要

星の色を変更するには、itemBuilder内でIconウィジェットのcolorプロパティを設定します。

サンプルコード

RatingBar.builder(
  itemBuilder: (context, _) => Icon(
    Icons.star,
    color: Colors.red, // 星の色を赤に変更
  ),
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 4行目:color: Colors.redで星アイコンの色を赤に変更してます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、色を変更する

初期評価数の変更

概要

初期評価数を変更するには、initialRatingプロパティを設定します。

サンプルコード

RatingBar.builder(
  initialRating: 4, // 初期評価を4に設定
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 2行目:initialRating: 4で初期評価を4に設定してます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、初期評価数を変更する

0.5評価を可能にする

概要

0.5単位での評価を可能にするには、allowHalfRatingプロパティをtrueに設定します。

サンプルコード

RatingBar.builder(
  allowHalfRating: true, // 0.5単位での評価を可能に
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 2行目:allowHalfRating: trueで0.5単位での評価を可能にしてます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、0.5評価を可能にする

評価外の色の設定

概要

評価外の星の色を変更するには、unratedColorプロパティを使用します。

サンプルコード

RatingBar.builder(
  unratedColor: Colors.grey, // 評価されていない星の色をグレーに設定
  // 他のプロパティは変更しない
)

サンプルコードの解説

  • 2行目:unratedColor: Colors.greyで評価されていない星の色をグレーに設定してます

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】評価バー(rating_bar)を実装し、評価外の色を変更する

まとめ

いかがでしたでしょうか?今回は、基本的な評価バーの実装。評価数、方向、サイズ、余白、色、初期評価数を変更する方法について解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

スマホ端末ホーム画面のアプリアイコンを変更する方法についてもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次