👋

FlutterのonTapイベントが遅い場合の解決事例

2023/08/11に公開

現象
onTapイベントのレスポンスが悪いという現象を解決した方法を紹介します。

遅い原因
Flutter自身が持つシングルタップとダブルタップを区別する機能が原因。
onDoubleTapイベントとonTapイベントを区別するために300ms待つ処理が入っている。
※onDoubleTapイベントを追加すると自動的にこの機能が動くようになっている。

解決方法:自分でTapイベントに二回目のクリックをカウントする仕組みを作る。

確認:
 この機能が原因で遅くなっているかどうかを確認するためにonDoubleTapイベントをコメントアウトして速くなるかどうか確認してみてください。

解決方法の流れ:
 1. onTapイベントに自分でonTapイベントの回数を数えるカウンターをつける。
 2. 2回目のタップだったらonDoubleTapに書いてあった処理を実行する。
 3. 実行したらカウンターをリセット
 4. シングルタップの場合は、カウンターを0にするタイマー(500ms)をつける。
この500msは長い気がしますが、doubleTapの検知とlongTapとの競合を避けるために設定しています。

この解決方法に至った記事:
https://stackoverflow.com/questions/61236928/inkwell-effect-starts-delayed-if-using-ondoubletap-want-to-trigger-that-as-soon

Discussion