Widget TreeBeginner10 XP2 min read
When should you use GestureDetector vs InkWell?
TL;DR: Use InkWell for Material Design ripple feedback on tappable widgets. Use GestureDetector for custom gesture handling (long press, drag, scale) or when you don't want visual feedback.
Full Answer
Both detect gestures, but InkWell adds Material ink splash animations and is semantically a button (accessibility). GestureDetector is a lower-level primitive with no visual feedback.
- ▸InkWell: ripple effect, splashColor, highlightColor, borderRadius — use for any tappable Material surface
- ▸GestureDetector: no visual feedback, supports onPanUpdate, onScaleUpdate, onLongPress, custom gestures
- ▸InkResponse: more customizable than InkWell (non-rectangular shapes)
- ▸GestureDetector + Ink: combine for custom visuals with Material ink
🎯
Wrap Ink around the child of InkWell to ensure the ripple renders on top of decorations. Without Ink, the ripple can be hidden behind a Container's decoration.
Code Examples
dartInkWell with correct Ink usage
Output
Blue rounded button with Material ripple effect on tap
Common Mistakes
- ✗Wrapping Container in InkWell — Container's decoration hides the ripple; use Ink instead
- ✗Using GestureDetector when you need accessibility — InkWell has built-in Semantics
Interview Tip
💡
The Ink vs Container inside InkWell distinction is a classic Flutter gotcha. Bringing it up proactively shows attention to detail.
#GestureDetector#InkWell#gestures#Material#touch