【Flutter】ElevatedButtonの背景色を変更する方法

ElevatedButtonは、Flutterアプリケーション内でボタンを表示するための便利なウィジェットですが、ボタンの背景色をカスタマイズすることで、アプリのデザインに合わせたユーザーエクスペリエンスを実現できます。
この記事では、初心者向けにElevatedButtonの背景色を変更する方法を詳しく解説します。

まず、デフォルトのElevatedButtonの背景色を確認してみましょう。以下は、通常のElevatedButtonのコード例です。

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

ElevatedButtonの背景色を変更するためには、styleプロパティを使ってElevatedButton.styleFromを利用します。
styleFromには、backgroundColorプロパティを設定することで、ボタンの背景色を変更できます。

 ElevatedButton(
   onPressed: () {
     // ボタンが押されたときの処理
   },
   style: ElevatedButton.styleFrom(
     // 背景色を青に設定
 　  backgroundColor: Colors.blue,
   ),
   child: Text('青いボタン'),
 )

ElevatedButton の backgroundColor プロパティには、Color オブジェクトを指定することで、カスタムな背景色を設定できます。この方法を使うと、独自の色をボタンに適用でき、デザインに合わせた柔軟なカスタマイズが可能です。

　ElevatedButton(
    onPressed: () {
      // ボタンが押されたときの処理
    },
    style: ElevatedButton.styleFrom(
      // カスタムの背景色を設定
      backgroundColor: Color(0xFFE57373),
    ),
    child: Text('カスタム色のボタン'),
  )

ElevatedButtonの背景色を変更することで、アプリのデザインに合わせたボタンを作成することができます。
backgroundColorプロパティを使用して、背景色を簡単に変更できることを覚えておきましょう。
鮮やかなボタンや統一感のあるデザインを実現して、ユーザーエクスペリエンスを向上させましょう！