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

はじめに

食べログのようなレビューをするアプリを作っていると、評価バーが大量に必要になってくることがあります。 そんな評価バーを簡単に実装する方法をご紹介します。

開発環境

• Flutter version 3.1.0
• Dart 2.19.0
• flutter_rating_bar 4.0.1

flutter_rating_barパッケージをインストール

[flutter_rating_bar] ( https://pub.dev/packages/expandable/install ) というパッケージを使用します。 以下のコマンドで、flutter_rating_barをインストールしてください。 flutter pub add flutter_rating_bar
flutter pub get

Widgetの実装

Widget _ratingBar() {
    return RatingBar.builder(
      itemBuilder: (context, _) => Icon(
        _selectedIcon ?? Icons.star,
        color: Colors.amber,
      ),
      onRatingUpdate: (rating) {
      //評価が更新された際の処理
      },
    );
  }

これだけで、評価ばーを実装できました。 また、以下のように 初期値, 向き, 段階数などの設定ができます。

Widget _ratingBar() {
    return RatingBar.builder(
      initialRating: 2.0, //初期値
      minRating: 1,
      direction: Axis.horizontal, //縦か横か
      allowHalfRating: true, //0.5評価の有効化
      unratedColor: Colors.amber.withAlpha(50), //アイコンの色
      itemCount: 5, //段階数
      itemSize: 50.0, //アイコンの大きさ
      itemPadding: EdgeInsets.symmetric(horizontal: 4.0), //アイテム同士の間隔
      itemBuilder: (context, _) => Icon(
        _selectedIcon ?? Icons.star,
        color: Colors.amber,
      ),
      onRatingUpdate: (rating) {
        setState(() {
          _rating = rating;
        });
      },
      updateOnDrag: true, //ドラッグによる操作可能か
    );
  }

コード全文

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late double _rating;
  double _initialRating = 2.0;

  IconData? _selectedIcon;

  @override
  void initState() {
    super.initState();
    _rating = _initialRating;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(
        builder: (context) => Scaffold(
          appBar: AppBar(
            title: Text('Flutter Rating Bar'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 40.0,
                ),
                _ratingBar(),
                Text(
                  'Rating: $_rating',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _ratingBar() {
    return RatingBar.builder(
      initialRating: _initialRating, //初期値
      minRating: 1,
      direction: Axis.horizontal, //縦か横か
      allowHalfRating: true, //0.5評価の有効化
      unratedColor: Colors.amber.withAlpha(50), //アイコンの色
      itemCount: 5, //段階数
      itemSize: 50.0, //アイコンの大きさ
      itemPadding: EdgeInsets.symmetric(horizontal: 4.0), //アイテム同士の間隔
      itemBuilder: (context, _) => Icon(
        _selectedIcon ?? Icons.star,
        color: Colors.amber,
      ),
      onRatingUpdate: (rating) {
        setState(() {
          _rating = rating;
        });
      },
      updateOnDrag: true, //ドラッグによる操作可能か
    );
  }
}

さいごに

rating_barを使えば、お店の評価やレビューをわかりやすく簡単に実装できます。 効率よくわかりやすいアプリを作りましょう！