FlutterFlow ダブルタップ防止

ついつい人は上手くいったかわからない時はボタンをダブルタップしがち。
大量に不要なデーターが溜まってしまうのを防ぐためにダブルタップ防止策です。


次の流れでOK(超要約)

  1. Page State に isSubmitting(名前はなんでもOK)(bool/初期値 false)。
  2. ボタンを !isSubmitting のときだけ有効化。
  3. On Tap:isSubmitting=true → Backend Call(Non‑Blocking OFF)→ Clear Query Cache → Snackbar → isSubmitting=false。
  4. エラー時も isSubmitting=false に戻す分岐を追加。

1) Page State にフラグを作る

  • 画面左の Variables → Page State
    isSubmitting(Boolean / 初期値 false) を追加。

このスイッチの色は、そのBoolean(真偽値)の初期値が「false」(オフ)か「true」(オン)かを示しています。

初期値は false(スイッチがオフ/赤)にしておくのが正解です。

  • OFF(赤)= false: 初回タップ時にはボタンが有効
  • ON(青)= true: 作成処理が動いている間だけボタンが無効化

こうしておくと、最初はボタンが押せて、押した瞬間に isCreating = true に変わって無効化、処理終わりでまた false に戻る…という流れが実現できます。

2)ボタンのアクションフローを編集

  1. アクションフローを開きます。
  2. いちばん先頭に Update App State アクションを追加。
    • FieldisSubmitting
    • Update Type:Set Value
    • Value to settru
  3. 最後に、もう一度 Update App State を追加。
    • FieldisSubmitting
    • Update Type:Set Value
    • Value to setfalse

これで「ボタンを押した瞬間に isSubmitting=true となり、処理終了後に false に戻る」ようになります。

最初にこちら
最後にこちら

3) 次は「ボタンを押せないようにする」設定

  1. ボタンを選択し、右側のプロパティパネルを開きます。
  1. Disabled?(無効化)の項目にバインドを設定します。
  1. バインド先:Page State → isSubmitting
これでConfirmします

こうすると、isSubmitting == true のあいだボタンがグレーアウトし、2度押しを防げます。

これでダブルタップ防止が完成しますので、動作をお試しください!

ちょい足し(任意)

ローディング表示:ボタンの「Loading/Progress」系プロパティがあれば、isSubmitting にバインドするとわかりやすいです(なければ Snackbar で「処理中…」を出してもOK)。

ナビゲートでページ離脱する場合:Page State はページ破棄とともにリセットされるので、isSubmitting を戻す処理を入れなくても実害はありません(残るページの場合は必ず false に戻してください)。

目次