【Flutter】InkWellとGesture Detectorの違いを徹底解説

Flutter

Nicolas Christopher

2025年02月27日

はじめに

こんにちは、株式会社メンバーズCross Applicationカンパニーのニコラスです。

アプリを作成する時には、ユーザーからのアクションを受け取ることが必要です。
例えば、タブを押したら画面が切り替わったり、地図をドラッグしたら見える範囲が変わったりします。
Flutterではタップジェスチャーの検出にはButtonWidgetを使用するのがシンプルな選択ですが、より複雑なジェスチャーを検出するために様々なWidgetが用意されています。
この記事では、その中でも使用頻度が高いGestureDetectorとInkWellについて、それぞれの特徴と違いを説明します。
（GestureDetectorとInkWell以外のWidgetについて知りたい方は公式サイトへ）

GestureDetector

GestureDetectorはタップ、ドラッグ、スケール等のようなユーザーのジェスチャーを検出するために使われます。
どのWidgetでも使用することができるという特徴がありますが、独自実装しないとタップ時のアニメーションなど視覚的なエフェクトはなく、カスタムエフェクトや複雑なジェスチャーを実装したい時に適しています。

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: () {
    print('タップしました!');
  },
  behavior
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.orange,
    child: Text('タップしてください', style: TextStyle(color: Colors.white)),
  ),
)

GestureDetectorでは以下のジェスチャーを検出することができます。

ドラッグ
タップ
ダブルタップ
ロングタップ
スケール
ピンチ

そして、GestureDetectorにはbehaviorというプロパティがあります。
Behaviorの設定によってタップの反応範囲が変わりますので、反応範囲のカスタマイズが必要な場合はbehaviorプロパティを変更してください。

子ウィジェットのみ（デフォルト）

behavior: HitTestBehavior.deferToChild

子ウィジェットの余白も含む

behavior: HitTestBehavior.opaque

子ウィジェットの背景も含む

behavior: HitTestBehavior.translucent

公式サイト

InkWell

InkWellはGestureDetectorのようにユーザーのジェスチャーを検出するために使われるWidgetですが、簡単なジェスチャー（タップ等）のみ検出可能です。
そして、InkWellには独自実装しなくても波紋（リップル）の視覚的なエフェクトがありますので、簡単な動作かつ視覚的なエフェクトありで実装したい時に適しています。
しかし、Material Widgetではないと視覚的なエフェクトがないので要注意です。

InkWell(
  onTap: () {
    print('タップしました!');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.orange,
    child: Text('タップしてください', style: TextStyle(color: Colors.white)),
  ),
)

InkWellでは以下のジェスチャーを検出することができます。

タップ
ダブルタップ
ロングタップ

波紋エフェクトをカスタマイズするには以下のプロパティを使います。

splashColor: タップ時の波紋エフェクトの色
highlightColor: タップ時のハイライト色
radius: 波紋エフェクトの広がり範囲

InkWell(
  onTap: () {
    print('タップしました!');
  },
  splashColor: Colors.white.withOpacity(0.5),
  highlightColor: Colors.white.withOpacity(0.3),
  borderRadius: BorderRadius.circular(10),
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.orange,
    child: Text('タップしてください', style: TextStyle(color: Colors.white)),
  ),
)

公式サイト