[Flutter]TextButtonのタップ中の色を変える方法

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

TextButtonのタップ中の色を変える方法を紹介します。

方法

TextButtonのタップ中の色を変えるには、まず引数「style」に「ButtonStyle」クラスを指定します。

次に、「ButtonStyle」の引数「background」に、「MaterialStateProperty.resoveWith<Color>()」を指定します。

TextButton(
  child: Text('Button'),
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(),
  ),
)

最後に、「resolveWith」内にボタンのタップ中に色が変わる処理を追加します。

TextButton(
  child: Text('Button'),
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.pink; //タップ中の色
        }
        return Colors.transparent; //通常時の色（透明色）
      },
    ),
  ),
)

「resolveWith」には、「(Set<MaterialState>){}」のような関数を指定します。

この関数の引数では、ボタンの状態を受け取ることが出来ます。

この引数を使って条件分岐をし、ボタンのタップ中は色が変わるようにします。

ボタンがタップ中かどうかは、「states.contains(MaterialState.pressed)」のようにします。

タップ中であれば、「states.contains(MaterialState.pressed)」は「true」になります。

また、設定したい色は、return文で指定します。