Zenn
Open3

InkWellとGestureDetectorの違いは？

muranakarmuranakar

1. 概要

FlutterでUIを実装する際、タップやジェスチャーの検出に使用される代表的な2つのウィジェット「InkWell」と「GestureDetector」について、その特徴と使い分けを解説します。

2. InkWellの特徴

InkWellは、Material Designのタッチフィードバックエフェクトを実装したウィジェットです。

InkWell(
  onTap: () {
    print('タップされました');
  },
  child: Container(
    padding: EdgeInsets.all(12),
    child: Text('タップしてください'),
  ),
)

主な特徴：

  • タップ時に波紋エフェクトが表示される（Material Design準拠）
  • Material Designを採用しているアプリに最適
  • 視覚的なフィードバックが標準で提供される

3. GestureDetectorの特徴

GestureDetectorは、より広範なジェスチャーを検出できるシンプルなウィジェットです。

GestureDetector(
  onTap: () {
    print('タップされました');
  },
  onLongPress: () {
    print('長押しされました');
  },
  child: Container(
    padding: EdgeInsets.all(12),
    child: Text('ジェスチャーを検出します'),
  ),
)

主な特徴：

  • 視覚的なフィードバックは標準では表示されない
  • より多くのジェスチャーイベントを検出可能
  • パフォーマンスが若干優れている

4. 主な違いの比較

4.1 視覚的フィードバック

  • InkWell: 波紋エフェクトあり（標準）
  • GestureDetector: なし（カスタム実装が必要）

4.2 検出可能なジェスチャー

InkWell:

InkWell(
  onTap: () {},      // タップ
  onDoubleTap: () {}, // ダブルタップ
  onLongPress: () {}, // 長押し
  child: Widget(),
)

GestureDetector:

GestureDetector(
  onTap: () {},           // タップ
  onDoubleTap: () {},     // ダブルタップ
  onLongPress: () {},     // 長押し
  onPanUpdate: () {},     // ドラッグ
  onScaleUpdate: () {},   // スケール
  onVerticalDragUpdate: () {}, // 垂直ドラッグ
  child: Widget(),
)