【Flutter】ボタンの無効化と有効／無効を切り替える方法

今回は、Flutter のボタンを押せなくする（無効化する）方法について紹介します。単に無効化するだけでなく、条件によって、有効化と無効化を切り替える方法についても紹介します。

ボタンを無効化

ボタンを無効化するには、onPressed に null を指定します。
無効になると、ボタンのデザインも自動で変わります。

ElevatedButton(
  onPressed: null,
  child: Text('無効'),
)

条件によってボタンの有効化と無効化を切り替えるには、三項演算子を使用します。

三項演算子とは？
三項演算子を使うと、以下のように、条件分岐を簡潔に書くことができます。

条件 ? 条件がtrueの場合 : 条件がfalseの場合

onPressed で三項演算子を使用して、ボタンが無効になる条件と、その条件が true の場合に null（無効化）を指定します。基本的な形は、以下の通りです。

onPressed: ボタンが無効になる条件 ? null : (){}

下記ソースコードは、ボタンが5回以上押されたとき（count が5以上のとき）に、ボタンが無効化される例となっています。

int count = 5;

ElevatedButton(
  onPressed: count >= 5 ? null : (){
    setState(() {
      count++;
    });
  },
  child: Text('countが5以上なら無効'),
)

今回は、Flutter のボタンを無効化する方法を紹介しました！

以上で、【Flutter】ボタンを無効化する方法 は終わりです。