GestureDetector conflicts with scroll gestures

Why This Happens

In Flutter, when a GestureDetector is placed inside a ListView or SingleChildScrollView, the scroll gesture arena may win over the tap gesture. Use the behavior property or InkWell instead, which properly handles gesture disambiguation in scrollable contexts.

The Problem

ListView(
  children: [
    GestureDetector(
      onTap: () => print('tapped'),
      child: Container(
        height: 50,
        color: Colors.transparent, // Transparent doesn't receive hits
      ),
    ),
  ],
)

The Fix

ListView(
  children: [
    GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => print('tapped'),
      child: Container(
        height: 50,
      ),
    ),
  ],
)

Step-by-Step Fix

1. 1

   Identify the error

   Notice that taps on a GestureDetector inside a scrollable widget are not being registered.

2. 2

   Find the cause

   Check if the GestureDetector has a transparent or no-color child and lacks the behavior property.

3. 3

   Apply the fix

   Set behavior: HitTestBehavior.opaque on the GestureDetector, or use an InkWell with a Material ancestor.