[Flutter]ElevatedButtonの背景色(background color)を設定する方法

どうも、ちょげ(@chogetarou)です。

ElevatedButtonの背景色を設定する方法を紹介します。

方法
1. ElevatedButton.styleFrom
2. ButtonStyle
まとめ

方法

ElevatedButtonの背景色を設定する方法は、２つあります。

ElevatedButton.styleFrom

１つは、ElevatedButton.styleFromを使う方法です。

ElevatedButton(
          onPressed: () {},
          child: Icon(Icons.search),
          style: ElevatedButton.styleFrom(
            primary: Colors.pink,//背景色
          ),
        )

styleFromの引数「primary」で、色の設定をすることが出来ます。

ButtonStyle

もう１つは、ButtonStyleを使う方法です。

ElevatedButton(
          onPressed: () {},
          child: Icon(Icons.data_saver_on),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(
              Colors.yellow,//色の設定
            ),
          ),
        )

ButtonStyleの引数「backgroundColor」を使うことによって、背景色を設定することが出来ます。

ただ、この引数には、色を直接指定するわけではなく、MaterialStateProperty.all()の引数で指定します。