ブログ

ElevatedButtonとは

FlutterのElevatedButtonは、マテリアルデザインのボタンウィジェットです。ユーザーがタップしたときにエレベーション（影）が増え、視覚的なフィードバックを提供します。

基本的な使用方法は以下の通りです：

ElevatedButton(
  onPressed: () {
    // ボタンが押されたときの処理
  },
  child: Text('ボタンのテキスト'),
)

このコードは、テキストラベルが’ボタンのテキスト’で、押されたときに特定の処理を実行するボタンを作成します。onPressedパラメータがnullでない場合、ボタンは有効になります。それがnullの場合、ボタンは無効になり、タップに反応しません。

ElevatedButtonは、そのデザインと動作がマテリアルデザインのガイドラインに従っているため、アプリケーションに一貫性とプロフェッショナルな外観を提供します。さらに、カスタマイズが可能で、色、形状、エレベーションなどを自由に設定できます。これにより、ブランドのスタイルガイドに合わせてボタンを調整することが可能です。

Elevationの設定方法

FlutterのElevatedButtonでは、styleプロパティを使用してエレベーションを設定できます。エレベーションは、ボタンの影の深さを表し、ボタンが浮いているかのように見せる効果を持ちます。

以下に、エレベーションを設定する基本的なコードを示します：

ElevatedButton(
  onPressed: () {
    // ボタンが押されたときの処理
  },
  child: Text('ボタンのテキスト'),
  style: ElevatedButton.styleFrom(
    elevation: 5.0,  // エレベーションの値を設定
  ),
)

このコードでは、エレベーションの値を5.0に設定しています。エレベーションの値を大きくすると、ボタンの影が大きくなり、ボタンがより高く浮いているように見えます。逆に、エレベーションの値を小さくすると、ボタンの影が小さくなり、ボタンがより低く浮いているように見えます。

なお、ElevatedButtonのエレベーションは、ボタンが押されたときや無効化されたときに自動的に変化します。これはマテリアルデザインのガイドラインに従った動作で、ユーザーに対する視覚的なフィードバックを提供します。

ElevatedButtonのスタイル設定

FlutterのElevatedButtonでは、styleプロパティを使用してボタンのスタイルを設定できます。色、形状、エレベーションなど、多くの視覚的な特性をカスタマイズすることが可能です。

以下に、基本的なスタイル設定のコードを示します：

ElevatedButton(
  onPressed: () {
    // ボタンが押されたときの処理
  },
  child: Text('ボタンのテキスト'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,  // ボタンの背景色
    onPrimary: Colors.white,  // ボタンのテキスト色
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),  // ボタンの角の丸み
    ),
    elevation: 5.0,  // ボタンのエレベーション（影）
  ),
)

このコードでは、ボタンの背景色を青に、テキスト色を白に設定しています。また、ボタンの角を丸くし、エレベーションを5.0に設定しています。

ElevatedButton.styleFromメソッドは、ボタンのスタイルを一括で設定するための便利な方法です。しかし、より詳細なスタイル設定が必要な場合は、ButtonStyleクラスを直接使用することも可能です。

なお、ElevatedButtonのスタイルは、ボタンが押されたときや無効化されたときに自動的に変化します。これはマテリアルデザインのガイドラインに従った動作で、ユーザーに対する視覚的なフィードバックを提供します。

ElevatedButtonの使用例

以下に、ElevatedButtonの基本的な使用例を示します：

ElevatedButton(
  onPressed: () {
    print('ボタンが押されました！');
  },
  child: Text('クリックしてください'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,  // ボタンの背景色
    onPrimary: Colors.white,  // ボタンのテキスト色
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),  // ボタンの角の丸み
    ),
    elevation: 5.0,  // ボタンのエレベーション（影）
  ),
)

このコードは、テキストラベルが’クリックしてください’で、押されたときにコンソールに’ボタンが押されました！’と出力するボタンを作成します。また、ボタンの背景色を青に、テキスト色を白に設定し、ボタンの角を丸くしてエレベーションを5.0に設定しています。

このように、ElevatedButtonは非常に柔軟で、多くの視覚的な特性をカスタマイズすることが可能です。これにより、アプリケーションのブランドやスタイルガイドに合わせてボタンを調整することができます。