スライダー Slider

つまみを横へドラッグして値を決める。目盛りを付けると決まった刻みに吸い付き、動かしている間だけ上に値が出る。

別名: スライダーつまみ音量バーシークバー目盛り付きスライダー値の調整SliderCupertinoSliderSeek Bar
動き: つまみを横へドラッグ目盛りに吸い付く上に値の吹き出し
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

Slider に value・min・max・onChanged を渡します。音量や明るさのように「だいたい」で決める値に向きます。

divisions を付けると決まった刻みに吸い付き、label を渡すとドラッグ中だけ上に値の吹き出しが出ます。

onChangeEnd は指を離したときだけ呼ばれるので、通信など重い処理はこちらで行います。

左右にアイコンを置くと、どちらが大きいかが分かりやすくなります（🔈 — 🔊）。

iOS 風には CupertinoSlider があります。

Material 3 の新しい見た目（2024年版）は year2023: false で選べますが、3.47 時点では非推奨の旗で、既定は従来の見た目です。

こんなときに

音量・明るさ・文字サイズなど、だいたいで決めてよく、すぐ結果が見える値

避けたい場面

正確な数値を入れたい（数値入力や数量ステッパーにする）

最小コード

Row(children: [
  const Icon(Icons.volume_mute),
  Expanded(
    child: Slider(
      value: volume,
      onChanged: (v) => setState(() => volume = v),
    ),
  ),
  const Icon(Icons.volume_up),
])

// 目盛りと吹き出し
Slider(
  value: size,
  min: 12,
  max: 24,
  divisions: 6,
  label: '${size.round()}',
  onChanged: (v) => setState(() => size = v),
)