FlutterのElevatedButtonの使い方

Flutterでボタンを実装する際によく使用されるのがElevatedButtonです。

今回は基本的な使い方から、デザインのカスタマイズまでまとめます。

ElevatedButtonとは？

ElevatedButtonは、立体感（影）のあるボタンを作成するためのWidgetです。

• タップ可能な主要アクションに使用
• MaterialDesignに準拠

基本的な使い方

ElevatedButton(
  onPressed: () {
    print('ボタン押下');
  },
  child: Text('ボタン'),
)

スタイルのカスタマイズ

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.orange,
    foregroundColor: Colors.white,
    padding: const EdgeInsets.symmetric(vertical: 14),
  ),
  child: Text('ログイン'),
)

• backgroundColor ボタンの背景色
• foregroundColor テキストやアイコンの色
• padding 内側の余白

角丸の設定

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(12),
),

横幅いっぱいにする

SizedBox(
  width: double.infinity,
  child: ElevatedButton(...),
)

以上で、簡単なElevatedButtonの使い方の説明は完了です。
こちらの内容だけでもある程度のボタンが作れるので、覚えておくと良いと思います。