[Flutter]TextButtonの背景色を変える方法

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

TextButtonの背景色を変える方法を紹介します。

方法

TextButtonの背景色を変える方法は２つあります。

.styleFrom

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

TextButton.styleFromの引数「backgroundColor」に背景色を指定します。

そして、TextButtonの引数「style」に背景色を指定した「styleFrom」を設定することで、背景色を変えることが出来ます。

TextButton(
          onPressed: () {},
          child: Text("HELLO"),
          style: TextButton.styleFrom(
            backgroundColor: Colors.red,
          ),
        )

ButtonStyle

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

TextButtonの引数にButtonStyleクラスを指定します。

そして、ButtonStyleの引数「backgroundColor」で、背景色を設定します。

ただ、ButtonStyleで色を指定する場合は、MaterialStateProperty.all()を使います。

TextButton(
          onPressed: () {},
          child: Text("HELLO"),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.yellow),
          ),
        )

まとめ

TextButtonの背景色を変える方法は次の２つです。

• styleFromを使う方法
• ButtonStyleを使う方法