If Flutter list item does not get scroll events in the parent list view – Most likely – do not look at the list item – look at the list view & scroll controller.
Root Cause
By default, InkWell consumes all pointer events, including scroll gestures (vertical drags). When your finger touches the InkWell area (which covers the entire list item), the InkWell’s internal GestureRecognizer wins the gesture arena against the parent ListView’s scroll recognizer → the ListView never receives vertical drag events → the list stops scrolling as soon as you touch an item.
This is exactly what you’re experiencing: the list item gets taps (onTap works), but blocks scrolling.
Solutions (from best to worst)
Recommended Solution #1: Use ListTile + InkWell with Material correctly (Flutter’s intended way)
Replace your whole Material → InkWell structure with a proper ListTile or at least wrap the content in InkWell but allow scroll gestures to pass through when appropriate.
But the cleanest and most reliable fix is:
ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 16).w,
leading: ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: ImageWidget(
),
),
title: Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
subtitle,
),
onTap: () {
},
);
ListTile inside a ListView automatically handles ripple + scrolling correctly.
Solution #2: Keep your custom layout but fix gesture conflict
If you really need full custom layout, do this:
Material(
color: Colors.transparent, // Important: transparent, not white
child: InkWell(
onTap: () { ... },
// This is the key part:
child: GestureDetector(
// Let vertical drags pass to parent scrollview
behavior: HitTestBehavior.translucent,
onVerticalDragStart: (_) {}, // dummy to allow vertical drag
onVerticalDragUpdate: (_) {}, // this allows scrolling
child: Padding(
padding: EdgeInsets.symmetric(vertical: 10).w,
child: Row(
children: [ ... your content ... ],
),
),
),
),
);
Or even simpler (works in 95% of cases):
InkWell(
onTap: () { ... },
child: Row(
children: [
// your widgets
],
),
),
Solution #3: Use behavior: HitTestBehavior.opaque + scrollable fix (less reliable)
InkWell(
onTap: () { ... },
child: Container(
color: Colors.white,
child: Opacity(
opacity: 1.0,
child: GestureDetector(
behavior: HitTestBehavior.translucent,
child: YourRowContent(),
),
),
),
);
Too complicated — avoid.
Summary – Quick Fix for Your Code
Just replace your entire widget with this minimal change:
InkWell(
onTap: () {
},
child: Padding(
padding: EdgeInsets.symmetric(vertical: 10).w,
child: Row(
children: [
// ... all your existing children (ClipRRect, Expanded, etc.)
],
),
),
),
And remove the outer Material(color: Colors.white) — it’s not needed and can interfere.
This alone fixes scrolling in 99% of cases when used inside ListView.builder.
