[Flutter]ElevatedButtonのタップ中の色を変えるには？

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

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

方法

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

次に、ButtonStyleの「backgroundColor」に「MaterialStateProperty.resolveWith<Color>」を指定します。

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

最後に、「(Set<MaterialStates>){}」という関数を「resolveWith」内に指定し、関数の処理でタップされている時に色が変わるようにします。

ElevatedButton(
  child: Text('Button'),
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Colors.pink; //ボタンを押されている間の色
        }
        return Colors.blue; //通常時の色
      },
    ),
  ),
)

上記のコードを説明します。

引数「states」では、ボタンの状態を取得することが出来ます。

「states.constrains(MateraiState.pressed)」で、ボタンがタップ中かどうかを判断します。

そして、タップ中ならば、「Colors.pink」を色に設定するようにします。

もし、タップ中でないならば、通常時の色「Colors.blue」を設定します。

この処理によって、ボタンがタップ中の色を変えることが出来ます。