[Flutter]ElevatedButtonの色をタップで切り替える方法

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

ElevatedButtonの色をタップで切り替える方法を紹介します。

方法

２つの色をタップで切り替える場合は、bool型の変数を用意し、Buttonの引数「onPressed」で変数の値を反転します。

そして、ElevatedButton.styleFromの引数「primary」と三項演算子を使って、色の切り替えを行います。

       child: ElevatedButton(
          onPressed: () => setState(() => _isYellow = !_isYellow),
          child: Text('Button'),
          style: ElevatedButton.styleFrom(
            primary: _isYellow ? Colors.yellow : Colors.blue,
          ),
        )