トグルボタン Toggle Buttons
太字・斜体・下線のように、つながったアイコンボタンを押すたびにオンとオフが切り替わる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
文章エディタの書式ボタンのように、それぞれ独立してオン・オフできるボタンの集まりです。
ToggleButtons に、各ボタンがオンかどうかの bool のリスト(isSelected)を渡し、onPressed で押された番号を受け取ります。
全部を独立にすれば複数オン、押されたもの以外を false にすれば「1つだけ」の動きにできます。
新しく作る画面なら、見た目がそろう SegmentedButton も検討してください。
こんなときに
- 書式・表示モードなど、オン・オフを並べて切り替えるツールバー
避けたい場面
- 選んだ結果で画面が大きく変わる切り替え(タブやセグメントボタンが合う)
最小コード
final selected = [true, false, false]; // 太字・斜体・下線
ToggleButtons(
isSelected: selected,
onPressed: (i) => setState(() => selected[i] = !selected[i]),
borderRadius: BorderRadius.circular(8),
children: const [
Icon(Icons.format_bold),
Icon(Icons.format_italic),
Icon(Icons.format_underline),
],
)使うウィジェット
ToggleButtons