Flutter Flameでのタッチイベント(TapCallback)の使い方まとめ

Flutter Flameにおけるタッチイベント(TapCallback)の使い方をまとめる。

TapCallback とは？

Flameでは、それぞれのComponentにイベント処理が最初から備わっておらず、 ユーザーがMixInを追加することで、イベント処理を追加するようになっている。

TapCallback MixInを追加することで、そのComponentにタッチイベントを定義できるようになる。

以下の例を見てみよう。 MyComponentをタッチすると、titleシーンに遷移するようになっている。

class MyComponent extends Component with TapCallbacks{

  @override
  void onTapDown(TapDownEvent event){
    final game = findGame();
    game.router.pushReplacementNamed('title');
  }
}

おそらく、onTapDownが最も利用頻度が高いと思うが、他にも様々なイベントが用意されている。

  @override
  void onTapDown(TapDownEvent event) {

  };

  // ユーザーが正常に指を離した時
  @override
  void onTapUp(TapUpEvent event) {

  };

  // onTapUp以外で指を離した時
  @override
  void onTapCancel(TapCancelEvent event) {

  };

onTapUpとonTapCancelはユーザーが指を離した時に実行されるが、その実行条件が違う。

onTapCancelはドラッグをした時など、タップ以外の行動をした時に発生する。

onTapUpは、ユーザーが画面に触れて同じ場所から指を離した時に発生する。

なんかややこしい。

参考ドキュメント

• 公式ドキュメント: Tap Events — Flame
• 公式 API ドキュメント: TapCallbacks mixin - events library - Dart API