ボタンの種類 Button Styles

塗り・トーナル・浮き・枠線・文字だけ、の5段階の目立ち方があり、操作の重要さに合わせて使い分ける。

別名: 塗りボタン枠線ボタンテキストボタントーナルボタンアイコンボタンFilled ButtonOutlined ButtonText Button
動き: 押すと波紋目立つ順に並ぶ
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

Material 3 のボタンは「どれだけ目立たせたいか」で選びます。目立つ順に

FilledButton（塗り）→ FilledButton.tonal（淡い塗り）→ ElevatedButton（影付き）→ OutlinedButton（枠線）→ TextButton（文字だけ）です。

画面の中で一番大事な操作（保存・送信など）だけを塗りにし、そのほかは枠線や文字だけにすると迷わせません。

.icon を付けるとアイコン付きになり、アイコンだけのボタンは IconButton（filled / filledTonal / outlined の種類あり）を使います。

onPressed に null を渡すと、押せない（グレーの）状態になります。

こんなときに

画面の中の操作に、重要さの順番を付けたい

避けたい場面

1画面に塗りのボタンを何個も並べる（どれが大事か分からなくなる）

最小コード

FilledButton(onPressed: save, child: const Text('保存')),        // 一番大事
OutlinedButton(onPressed: preview, child: const Text('プレビュー')),
TextButton(onPressed: cancel, child: const Text('キャンセル')),  // 控えめ

FilledButton.icon(
  onPressed: send,
  icon: const Icon(Icons.send),
  label: const Text('送信'),
),
IconButton.filledTonal(onPressed: bookmark, icon: const Icon(Icons.bookmark)),

const FilledButton(onPressed: null, child: Text('押せない')), // null で無効