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

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

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

方法

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

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

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

最後に、「resolveWith」内でボタンのタップ中の色を設定する処理をします。

OutlinedButton(
  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> ){}」のような関数を指定します。

関数の引数は、ボタンの状態を受け取ります。

この引数を使い、ボタンがタップ中の色を設定します。

具体的には、「stetes.containe(MaterialState.pressed)」で、ボタンがタップ中かどうかを判断します。

そして、return文でボタンがタップ中の色を返します。