[Flutter]ElevatedButtonのボタンの背景色と文字色の設定・変更方法

（注）2022/9にリリースされたFlutter3.3では、primary / onPrimary属性が backgroundColor / foregroundColorに変更となっていますのでご注意下さい。

2022.09.05

2022.09.06

Flutter3.3以降はElevatedButton.styleFromの「primary」「onPrimary」属性が非推奨になりました

2022年9月初旬に、FlutterのSDKが3.3.0にアップグレードされましたが、その中でElevatedButtonをカスタマイズする...

Flutter2.0以降は、ボタンのWidgetが「RaisedButton」から「ElevatedButton」に変更されましたが、

2021.03.09

2023.01.20

[2022/4に廃止]Flutter2.0以降はRaisedButtonとFlatButtonが非推奨になりました（ElevatedButtonとTextButtonに）

（注）本記事では「RaisedButtonは『非推奨（deprecated＝使えるけれどもやめときや）』と申し上げていますが、2022/...

「ElevatedButton」の背景色及びボタンに表示させる文字色を設定・変更する場合は、

• ElevatedButtonのstyle属性で、「ElevatedButton.styleFrom」メソッドを使って
• ボタンの背景色は「primary」属性で
• 文字色は「onPrimary」属性で

設定します。

RaisedButton(
  color: Colors.red, // background
  textColor: Colors.white, // foreground
  onPressed: () { },
  child: Text('RaisedButton with custom foreground/background'),
)

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.white, // foreground
  ),
  onPressed: () { },
  child: Text('ElevatedButton with custom foreground/background'),
)

New Buttons and Button themes

The basic material button classes have been replaced.

2021.03.10

2022.05.30

[Flutter]TextButtonで文字色を変更する方法

Flutter（フラッター）のバージョンが2.0になってから、背景なしのボタンである「FlatButton」が「TextButton」に変更...

2021.12.14

2023.01.10

[Flutter]ElevatedButtonはThemeData.buttonColorではボタン色が変えられない（「elevatedButtonTheme」を使う必要あり）

Flutter2.0以降はRaisedButtonがElevatedButtonに変更されましたが、アプリのテーマを設定するThem...

（以下の動画でも解説していますので、よろしければご覧下さい）