星評価 Star Rating

星を押すと、その星まで塗られる。横になぞると星が増えたり減ったりする。半分の星で 0.5 刻みにもできる。

別名: 星の評価レビューの星5段階評価レーティング星をつける半分の星Rating Bar
動き: 星を押すとそこまで塗られるなぞると星が増減
作り方: 自作標準ウィジェットの組み合わせで自分で作ります

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

レビューや満足度で、5段階の評価を付けてもらう形です。

星を Row に並べ、GestureDetector で押した位置（または横へなぞった位置）を x 座標から点数に変えます。

x を星1つの幅で割って、0.5 刻みに丸めれば半分の星にも対応できます。

塗りは Icons.star、半分は Icons.star_half、空は Icons.star_border で描き分けます。

点数の横に「とても良い」など言葉を出すと、何点を付けたかが伝わりやすくなります。

パッケージなら flutter_rating_bar で、好きな形のアイコンや表示専用の星も作れます。

こんなときに

レビュー・満足度・お気に入り度の入力

避けたい場面

細かい点数が必要な評価（スライダーにする）

最小コード

GestureDetector(
  onTapDown: (d) => setFrom(d.localPosition.dx),
  onHorizontalDragUpdate: (d) => setFrom(d.localPosition.dx),
  child: Row(mainAxisSize: MainAxisSize.min, children: [
    for (var i = 1; i <= 5; i++)
      Icon(
        rating >= i ? Icons.star
            : rating >= i - 0.5 ? Icons.star_half
            : Icons.star_border,
        color: Colors.amber, size: 40,
      ),
  ]),
)

// x 座標 → 0.5 刻みの点数
void setFrom(double x) => setState(() =>
    rating = ((x / 40) * 2).ceil().clamp(1, 10) / 2);