こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
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
)を設定しています。
表示確認
それでは、表示を確認してみましょ〜
合計評価数の変更
概要
合計評価数を変更するには、RatingBar.builder
ウィジェットのitemCount
プロパティを変更します。たとえば、評価バーに10個の星を表示したい場合は、itemCount
を10に設定します。
サンプルコード
RatingBar.builder(
itemCount: 10,
// 他のプロパティは変更しない
)
サンプルコードの解説
- 2行目:itemCount: 10で評価バーに10個の星を表示してます
表示確認
それでは、表示を確認してみましょ〜
方向の変更
概要
評価バーの方向を変更するには、direction
プロパティをAxis.horizontal
またはAxis.vertical
に設定します。デフォルトは水平方向(Axis.horizontal
)です。
サンプルコード
RatingBar.builder(
direction: Axis.vertical,
// 他のプロパティは変更しない
)
サンプルコードの解説
- 2行目:direction: Axis.verticalで評価バーの方向を縦に変更してます
表示確認
それでは、表示を確認してみましょ〜
サイズの変更
概要
評価バーの星のサイズを変更するには、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にしてます
表示確認
それでは、表示を確認してみましょ〜
余白の設定
概要
星の間の余白を設定するには、itemPadding
プロパティを使用します。
サンプルコード
RatingBar.builder(
itemPadding: EdgeInsets.symmetric(horizontal: 10.0), // 水平方向の余白を10に設定
// 他のプロパティは変更しない
)
サンプルコードの解説
- 2行目:itemPadding: EdgeInsets.symmetric(horizontal: 10.0)で水平方向の余白を10に設定してます
表示確認
それでは、表示を確認してみましょ〜
色の変更
概要
星の色を変更するには、itemBuilder
内でIcon
ウィジェットのcolor
プロパティを設定します。
サンプルコード
RatingBar.builder(
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.red, // 星の色を赤に変更
),
// 他のプロパティは変更しない
)
サンプルコードの解説
- 4行目:color: Colors.redで星アイコンの色を赤に変更してます
表示確認
それでは、表示を確認してみましょ〜
初期評価数の変更
概要
初期評価数を変更するには、initialRating
プロパティを設定します。
サンプルコード
RatingBar.builder(
initialRating: 4, // 初期評価を4に設定
// 他のプロパティは変更しない
)
サンプルコードの解説
- 2行目:initialRating: 4で初期評価を4に設定してます
表示確認
それでは、表示を確認してみましょ〜
0.5評価を可能にする
概要
0.5単位での評価を可能にするには、allowHalfRating
プロパティをtrue
に設定します。
サンプルコード
RatingBar.builder(
allowHalfRating: true, // 0.5単位での評価を可能に
// 他のプロパティは変更しない
)
サンプルコードの解説
- 2行目:allowHalfRating: trueで0.5単位での評価を可能にしてます
表示確認
それでは、表示を確認してみましょ〜
評価外の色の設定
概要
評価外の星の色を変更するには、unratedColor
プロパティを使用します。
サンプルコード
RatingBar.builder(
unratedColor: Colors.grey, // 評価されていない星の色をグレーに設定
// 他のプロパティは変更しない
)
サンプルコードの解説
- 2行目:unratedColor: Colors.greyで評価されていない星の色をグレーに設定してます
表示確認
それでは、表示を確認してみましょ〜
まとめ
いかがでしたでしょうか?今回は、基本的な評価バーの実装。評価数、方向、サイズ、余白、色、初期評価数を変更する方法について解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
スマホ端末ホーム画面のアプリアイコンを変更する方法についてもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
コメント