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

このページには広告が含まれる場合があります。

 

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

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

「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'),
)

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

こんな記事も読まれています

今すぐ無料お試しキットを受け取る

はじめての方へ


みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

みんプロ作成アプリ





今すぐ無料お試しキットを受け取る
TOP