セグメントボタン Segmented Button

2〜5個のボタンが1本につながっていて、選んだものだけが塗られる。「日・週・月」の切り替えなどに使う。

別名: セグメンテッドコントロール切り替えボタン期間切り替え横並びの選択ボタンSegmented ControlSliding Segmented Control
動き: つながったボタン選んだ所が塗られる iOS は滑って移る
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

少ない選択肢から1つ（または複数）を選ぶ、横並びのボタンです。

Material 3 では SegmentedButton を使い、segments に ButtonSegment を並べ、selected に選ばれている値の Set を渡します。

multiSelectionEnabled: true で複数選べるようになり、showSelectedIcon: false で選択中のチェックを消せます。

iOS 風にしたいときは CupertinoSlidingSegmentedControl で、選んだ所へ白い板が滑って移ります。

Web では日本語フォントが後から読み込まれて文字が折り返すことがあるので、幅を固定しておくと安全です。

こんなときに

2〜5個の選択肢から選び、選んだ結果がすぐ画面に反映される（グラフの期間・表示の切り替え）

避けたい場面

選択肢が6個以上（ドロップダウンやチップにする）

最小コード

SegmentedButton<String>(
  segments: const [
    ButtonSegment(value: 'day', label: Text('日')),
    ButtonSegment(value: 'week', label: Text('週')),
    ButtonSegment(value: 'month', label: Text('月')),
  ],
  selected: {period},
  onSelectionChanged: (s) => setState(() => period = s.first),
)

// iOS 風
CupertinoSlidingSegmentedControl<int>(
  groupValue: tab,
  onValueChanged: (v) => setState(() => tab = v!),
  children: const {0: Text('地図'), 1: Text('航空写真')},
)