Open4日前にコメント追加3
ElevatedButtonとは？

 概要ElevatedButtonは、Material Designのガイドラインに基づいた立体的なボタンウィジェットです。フラットなレイアウトに視覚的な階層を追加したい場合に適しています。

 基本的な使い方まず、最もシンプルな実装例を見てみましょう：
ElevatedButton(
  onPressed: () {
    print('ボタンが押されました');
  },
  child: Text('クリック'),
)
この実装では:

onPressed: ボタンタップ時のコールバック関数を定義

child: ボタン内に表示するウィジェットを指定

 応用的な実装より高度な実装例を見てみましょう：
ElevatedButton(
  onPressed: _isEnabled ? () {
    // ボタンの処理
  } : null,  // nullを設定すると無効化
  onLongPress: () {
    // 長押し時の処理
  },
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.white,
    backgroundColor: Colors.blue,
    elevation: 3.0,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  ),
  child: Text('カスタマイズボタン'),
)
このケースでは:

onLongPress: 長押し時の動作を定義

style: ボタンの見た目をカスタマイズ

foregroundColor: テキストの色

backgroundColor: 背景色

elevation: 影の高さ

padding: 内部の余白


 アイコン付きボタンの実装アイコンとテキストを組み合わせたボタンも作成できます：
ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('追加'),
  iconAlignment: IconAlignment.start,
)
ポイント:

ElevatedButton.icon: アイコン付きボタン用のコンストラクタ

icon: アイコンウィジェットを指定

label: テキストを指定

iconAlignment: アイコンの配置位置を指定

 使用上の注意点適切な使用場面
長いリストの中
広いスペースでの使用
ダイアログやカード上での使用は避ける
無効化の制御

onPressedとonLongPressの両方がnullの場合、ボタンは自動的に無効化
スタイルのカスタマイズ
個別のボタン: styleパラメータ
サブツリー全体: ElevatedButtonTheme
アプリ全体: ThemeData.elevatedButtonTheme

 関連するボタンウィジェット
FilledButton: 押下時に立体的にならない塗りつぶしボタン

FilledButton.tonal: セカンダリカラーを使用する塗りつぶしボタン

OutlinedButton: 枠線のみのボタン

TextButton: 枠線も背景色もないボタン
muranakar