【Flutter】RatingBar|レーティングバー(星の評価バー)の表示

今回はレーティングバー(星の評価バー)を表示できるRatingBarを紹介します。

RatingBarを使えばスライダー式(タップ式)でレーティングでき、評価アイコンを星形・ハート型など自由に指定できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|flutter_rating_barの導入

flutter pub add flutter_rating_bar
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

flutter_rating_barを導入します。

RatingBarの使い方

double _rating = 0;
RatingBar(
  allowHalfRating: true,
  ratingWidget: RatingWidget(
    full: Icon(Icons.star, color: Colors.amber),
    half: Icon(Icons.star_half, color: Colors.amber),
    empty: Icon(Icons.star_border, color: Colors.grey),
  ),
  onRatingUpdate: (rating) {
    _rating = rating;
  },
),

RatingBarに必須なプロパティはratingWidgetonRatingUpdateの2つです。

ratingWidgetの引数にRatingWidgetを渡し、RatingWidgetで評価状態別アイコンをfullhalfemptyでそれぞれ指定します。

onRatingUpdateではコールバック関数でレーティングバーの値(変数)を更新します。上記コードでは_ratingの値を更新しています。0.5評価する場合はallowHalfRatingtrueにします。

スライド時のホバー色を消す・変更

RatingBar(
  glow: false,
  glowColor: Colors.lightBlue,
  glowRadius: 1,  
  ...
),

スライド時にホバー色を消す場合はglowfalseにします。

ホバー色の変更、範囲はそれぞれglowColorglowRadiusで指定します。

初期値・最小値・最大値・アイコン数を指定

RatingBar(
  initialRating: 5,
  minRating: 1,
  maxRating: 10,
  itemCount: 10,
  ...
)

レーティングバーの初期値、最小値、最大値、アイコン数はそれぞれinitialRatingminRatingmaxRatingitemCountで指定できます。

評価アイコンのサイズ・余白調整

RatingBar(
  itemSize: 60,
  itemPadding: EdgeInsets.all(5),
  ...
)

評価アイコンのサイズ、余白調整はそれぞれitemSizeitemPaddingで指定できます。

サンプルコード

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: const CustomApp(),
      ),
    );
  }
}

class CustomApp extends StatefulWidget {
  const CustomApp({Key? key}) : super(key: key);

  @override
  State<CustomApp> createState() => _CustomAppState();
}

class _CustomAppState extends State<CustomApp> {
  double _rating = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RatingBar(
        glow: false,
        allowHalfRating: true,
        updateOnDrag: true,
        initialRating: 5,
        minRating: 1,
        maxRating: 10,
        itemCount: 10,
        itemSize: 30,
        itemPadding: EdgeInsets.all(2),
        ratingWidget: RatingWidget(
            full: Icon(Icons.star, color: Colors.amber),
            half: Icon(Icons.star_half, color: Colors.amber),
            empty: Icon(Icons.star_border, color: Colors.grey)),
        onRatingUpdate: (rating) {
          _rating = rating;
        },
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次