カスタムジェスチャーの実装から学ぶGesture

概要
Flutterの標準的なジェスチャー検出は強力ですが、特定の開発シーンでは複数のジェスチャーの競合や、ユーザー体験に合わせた独自動作の定義といった課題に直面します。
本セッションでは、こうした課題を踏まえて、Flutterアプリにおけるカスタムジェスチャーの実装例を軸に、Gestureの認識メカニズムや競合解決のアプローチなど、内部処理を含めて掘り下げて解説します。
- Flutterにおけるジェスチャー検出の基礎
- ジェスチャーの認識メカニズムと競合

Transcript

1. カスタムジェスチャーの実装から学ぶ Gesture 2025/11/13 Hirokazu Tanaka
2. Hirokazu Tanaka 株式会社 サイバーエージェント 23年度入社 株式会社 WinTicket techiro appgrape 自己紹介
3. 本セッションのアジェンダ • ユーザー体験に合わせたカスタムジェスチャーの実装 • Flutterにおけるジェスチャーの競合について 🎯ゴール ジェスチャーの仕組みを理解し 扱えるようにする
4. そもそもジェスチャーは どのような構成要素か？
5. FlutterのアーキテクチャーからGestureを眺める 以下の2つのレイヤーで 定義されている • Gestures • Pointers 画像引用: 「Flutter architectural overview」https://docs.flutter.dev/resources/architectural-overview FlutterフレームワークのFoundationの上に成り立っている
6. ユーザーの操作を表現するためのPointers 6 4種類のPointerEventを提供 ◦ PointerDownEvent ◦ PointerMoveEvent ◦ PointerUpEvent ◦ PointerCancelEvent 開発時に意識しないで開発できているのは なぜか？
7. GesureDetector
8. GestureDetectorについて 8 汎用的なジェスチャーを検出できるウィ ジェット RawGestureDetectorに依存
9. RawGestureDetectorを深ぼってみる 9 GestureRecognizer インターフェイスを持っている
10. GestureRecognizerについて 10 縦・横スクロールの条件 • 指の位置が初期値から 18px(y軸 or x軸)を超えて 移動したか？ で判定 ジェスチャーをどう認識するかを定義するロジック部分
11. おさらい: カスタムジェスチャーを定義するには • RawGestureDetector • GestureRecognizer この2つの定義が必要
12. では実際に カスタムジェスチャを作ってみる
13. 題材: レストラン検索アプリ 13 ListView Card UI 構造
14. カードUI上で利用可能なジェスチャー 14 横スクロール → 縦スクロール ↑
15. 斜めスクロールジェスチャを作ってみる
16. 斜めスクロールの定義 16 角度ベース : 60° を境界とする ⚠既存の横・縦スクロールの判定がされないように移 動距離18px 未満で判定 サンプルの Gest: https://gist.github.com/techiro/201d8c18c53caaee5f64a2e99098d624 斜めスクロール GestureRecognizerを新規作成
17. 斜めスクロールを登録する • RawGestureDetector に 斜めスクロールを登録 • コールバックを割り当てて動作を 定義 tcsdd これだけで、 斜めスクロール時の検知が可能に
18. 斜めスクロールの検知が可能になったが... 18 横スクロール → 縦スクロール ↑ 斜めスクロール ↗
19. カードUI上で利用可能なジェスチャー 19 横スクロール → 縦スクロール ↑ 斜めスクロール ↗ 斜めにスクロールした時、 どの判定になる？🤔 競合が起きるのでは？💥
20. GestureArena が競合を解決 20 • PointerDownEvent 時に作成 • 複数のGestureRecognizer の勝利・敗北通知の管理 → スクロールの競合は、 GestureArena が解決してくれる
21. 斜めスクロールを GestureArena と GestureRecognizer 視点で追ってみる
22. 22 斜めスクロールではない場合 • GestureArena に対して ◦ GestureDisposition.rejected ▪ 斜めスクロールジェスチャーが 敗北宣言 • GestureArena から ◦ rejectGesture が呼ばれる GestureArena に登録されている縦スクロール のジェスチャーが呼ばれる
23. 23 斜めスクロールの場合 • GestureArena に対して ◦ GestureDisposition.accepted ▪ ジェスチャーが勝利宣言 • GestureArena から ◦ acceptGesture が呼ばれる ◦ rejectGesture を通知 ▪ 他のRecognizer は敗北する 斜めスクロールジェスチャーでカード UIが 横スクロールされる
24. まとめ Gesture 周りの必須概念の以下の3つを実例を用いながら紹介 • RawGestureDetector: ジェスチャーのWidget • GestureRecognizer: ジェスチャーの条件 • GestureArena: 他のGestureRecognizerとの競合解決 紹介した仕組みを理解しておくと、意図しない動作を防いだり、 ユーザーの自然な操作をそのままUXにつなげたりできる
25. 参考文献 • Flutter Gesture - Qiita • Flutterのタッチイベント処理探訪① PointerEvent • Flutterのタッチイベント処理探訪② Gesture • Understanding Flutter's handling of Gestures • HitTestBehavior.opaque documentation is wrong · Issue #74733 · flutter/flutter