画面全体にタップイベントをつける際に他のタップイベントを邪魔しないようにする方法

はじめに

今回は画面全体にタップイベントをつける方法を備忘録的に紹介します。
画面全体にタップイベントをつけた場合、それと同階層またはその下にあるタップイベントは反応しなくなってしまいます。その対処法として紹介します。

実装

よくあるScaffoldを使用する方法で紹介します。

Scaffold(
  appBar: AppBar(),
  body: GestureDetector(
    onTap: () {}, // tapイベント
    behavior: HitTestBehavior.opaque, // これ
    child: TextButton(
      onPressed: () => print('tap'),
      child: Text(e),
    ),
  ),
);

GestureDetector の中にある behavior を設定します。この HitTestBehavior には三種類あり、 deferToChild , opaque , translucent があります。今回は子要素のタップイベントを邪魔しないようにするために opaque を使用しました。
translucent は似たような効果を持ちますが、こちらはStackを使用した時に使用すると下にスタックさせたWidgetを邪魔することがなくなります。