【Flutter】ボタンの無効化と有効/無効を切り替える方法 | ヒヨコ プログラミング(ヒヨプロ)

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

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 のボタンを無効化する方法を紹介しました!

  • onPressed で、null を指定することでボタンを無効化できます。
  • onPressed で、三項演算子を使うことで、条件に応じてボタンの有効化と無効化を切り替えることができます。

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

おすすめ書籍

コメント

タイトルとURLをコピーしました