モバイルアプリやWebアプリを開発する際に避けて通れないのが「イベント」の概念です。イベントとは、ユーザーがアプリ上で行う操作（タップ、スワイプ、クリックなど）やシステムの通知（ページの読み込み完了、データ受信など）を指します。アプリはこれらのイベントを検出し、それに応じた処理を行うことで、インタラクティブな動的体験を提供します。
ここでは、UI操作のイベントにフォーカスして、UIイベントハンドリングの基本知識について整理したいと思います。
Gesture Recognizer
アプリでUIイベントを処理するためには、まずイベントが発生したことを認識しなければなりません。これを自前で行うために必要なのが「Gesture Recognizer」(ジェスチャーリコグナイザ）です。ユーザーのタップやスワイプなどの操作を検出し、適切な処理を行うためには、事前にリコグナイザを設定しておく必要があります。これを怠ると、イベントが発生してもアプリは何も反応しないままとなってしまいます。したがって、イベントが発生する前にGesture Recognizerをセットしておく必要があります。
GestureDetectorの例
Flutterでは、例えば、GestureDetectorというウィジェットを使うことで、タップやスワイプ、ドラッグといった操作を簡単に認識し、それに応じた処理を記述することができます。
GestureDetector(
onTap: () {
print('タップされました');
},
child: Container(
color: Colors.blue,
width: 200,
height: 200,
),
)
上記のコードでは、青いボックスがタップされたときにコンソールに「タップされました」と表示されます。
イベント伝播とFlutterの階層構造
Flutterにおけるイベントハンドリングのもう一つの重要な概念が「イベントの伝播（バブリング）」です。イベントが発生すると、そのイベントはウィジェットツリー（widget tree）に沿って親ウィジェットへと伝わります。これを「バブリング（bubbling）」と呼び、特定のウィジェットで処理されなかったイベントが、さらに上位の親ウィジェットに伝わり、最終的にはルートウィジェットまで伝播する可能性があります。
この伝播を活用することで、例えば親ウィジェット全体で同じイベントを一括して処理したり、特定のウィジェットでのみイベントを消費させて、それ以上伝播させないようにすることが可能です。バブリングの制御には、適切にイベント処理の優先順位を設計することが求められます。
イベント消費の考え方とFlutterの実装
イベント消費とは、あるウィジェットでイベントを処理した際、そのイベントがそれ以上他の要素に伝播しないようにすることです。これにより、不要な重複処理を避けたり、予期せぬ挙動を防ぐことができます。
例えば、ドラッグ中にタップイベントを無視したい場合、タップイベントがドラッグの開始時点で消費されていなければ、タップとドラッグが競合する可能性があります。こうした状況では、事前にジェスチャーリコグナイザをセットアップし、どのイベントがどのタイミングで消費されるべきかを設計することで、アプリの動作をスムーズに保つことができます。
preventDefault に相当するFlutterのアプローチ
Web開発においては、preventDefaultを使うことで、デフォルトのイベント動作を無効にし、カスタムの処理を実装することが一般的です。Flutterでも、似たようなアプローチを取り、デフォルトの動作を抑制しながら独自の処理を組み込むことが可能です。
たとえば、ユーザーがテキストフィールドに入力したときに、デフォルトの動作を無効化して、別のアクションをトリガーしたい場合があります。FlutterのTextFieldは、デフォルトでテキストの入力や編集を提供しますが、特定のキー入力に応じたカスタム処理を行いたい場合、デフォルトの動作を無効化し、そのタイミングで別のアクションを実行することが可能です。これを実現するためには、RawKeyboardListenerを使い、テキストフィールドへの入力に対してキーイベントをキャプチャしてカスタムアクションを実装します。
ドラッグ開始後にGesture Recognizerを仕掛けてもハンドリングできない理由
イベント処理の中でも、特にドラッグ操作に関して「なぜドラッグ開始後にGesture Recognizerを設定してもイベントがハンドリングされないのか」について説明します。これには、イベントのライフサイクルが深く関係しています。
イベントが発生すると、システムはそのイベントのライフサイクルを管理します。例えば、ユーザーが画面をドラッグすると、最初に「タッチダウン」イベントが発生し、その後「ドラッグの移動（move）」イベントが続きます。この一連のイベントは、最初のタッチダウン時点でどの要素がイベントを処理するかが決定されます。つまり、タッチダウン後にGesture Recognizerを追加しても、既に進行中のイベントには反応できないのです。
この動作の背景には、イベントの「キャプチャリング（capturing）」という概念があります。タッチダウン時にキャプチャされたイベントは、その時点でどのリスナーがそのイベントを受け取るかを決定しており、進行中のイベントに対しては、新たに追加されたGesture Recognizerが割り込むことはできません。
前述のとおり、イベント発生前に仕掛けておく必要があるのです。