Zenn
Open1

ElevatedButtonのスタイル指定はどうする？

muranakarmuranakar

https://api.flutter.dev/flutter/material/ElevatedButton-class.html

1. デザインの基本概念

ElevatedButtonは、Material Designに基づいた立体的なボタンコンポーネントです。主に以下のような特徴があります：

  • フラットなレイアウトに奥行きを追加
  • ボタンを押すと影（elevation）が変化
  • 背景色とテキスト色のコントラストを活用

2. デザインの決定方法

ElevatedButtonのスタイルは、以下の3つの方法で決定されます：

2.1 個別のボタンスタイル

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    foregroundColor: MaterialStateProperty.all(Colors.white),
  ),
  child: Text('ボタン'),
  onPressed: () {},
)

2.2 テーマによる一括設定

ElevatedButtonTheme(
  data: ElevatedButtonThemeData(
    style: ButtonStyle(
      // ここでスタイルを定義
    ),
  ),
  child: // 子ウィジェット
)

2.3 アプリ全体のテーマ設定

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        // ここでスタイルを定義
      ),
    ),
  ),
)

3. スタイルのカスタマイズ可能な要素

styleFromメソッドを使用して、以下の要素をカスタマイズできます：

3.1 色関連

  • foregroundColor: テキストと前景の色
  • backgroundColor: ボタンの背景色
  • shadowColor: 影の色
  • surfaceTintColor: 表面のティント色

3.2 サイズと形状

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(200, 50),  // 最小サイズ
    padding: EdgeInsets.all(16),  // パディング
    shape: RoundedRectangleBorder(  // 形状
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('カスタムボタン'),
  onPressed: () {},
)

4. 使用上の注意点

  1. 適切な使用場所:

    • 長いリストの中
    • 広いスペース

  2. 避けるべき使用場所:

    • ダイアログ内
    • カード上
    • すでに立体的な要素の上

5. アクセシビリティ

  • onPressedがnullの場合、ボタンは自動的に無効化
  • enabledプロパティで有効/無効を制御可能
  • フォーカス管理のためのfocusNodeをサポート

このように、ElevatedButtonのデザインは階層的に管理され、様々なレベルでカスタマイズが可能です。アプリケーションの一貫性を保ちながら、必要に応じて個別のカスタマイズも行えます。