Flutter: InkWell vs GestureDetector: what is the difference?

Question

I'm completely new to Flutter and found out about InkWell and GestureDetector. It seemed to me that they are almost the same. The official documentation doesn't provide any in-depth comparison between them.

1. What are the differences between InkWell and GestureDetector?

2. When to use which?

Digestive

Answer 1

Differences:

1. They both provide many common features like onTap, onLongPress etc. The main difference is GestureDetector provides more controls like dragging etc. on the other hand it doesn't include ripple effect tap, which InkWell does.

2. You can use either of them according to your needs, you want ripple effects go with InkWell, need more controls go with GestureDetector or even combine both of them.

---

Ripple effect (using InkWell):

InkWell(
  onTap: () {},
  child: Ink(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

Mischief

so I guess that we'd need both if we want effect and extra events – Gers

How about to have both features! ripple effect and more control? – Celenacelene

The main difference is in Accessibility. If you provide something like GestsureDetector -> Semantics(value: changingBooleanValue) -> Custom widget, Talkback and VoiceOver won't be triggered, rather than Inkwell – Judithjuditha

Answer 2

Visual Difference

Other answers are absolutely right. This is the visual representation.

Elf

this needs to be added into flutter documentation. – Amaris

Answer 3

I will try to mention the functionality difference they have.

GestureDetector class is very broad. you can detect every type of interaction the user has with the screen or widget using it. it includes pinch, swipe, touch, plus custom gestures.

InkWell has a limited number of gestures to detect but it gives you ways to decorate the widget. you can decorate

colors: splashColor, focusColor, hoverColor...

border: borderRadius,customBorder, ...

hope this is helpful!

Oblation

Answer 4

The InkWell makes the whole area of the child as hotspot and receives user interaction easily. However, the GestureDetector does not make the whole area of the child as hotspot, like the padding areas aren't hotspots. Thus, using GestureDetector often leads to failed user interaction.

Evelineevelinn

Thanks for this. For a while, I was wondering why it is so difficult to press small widgets such as icons. This confirmed my suspicions. I now switched everything to InkWell. – Go

Answer 5

For me the important difference between them is: InkWell must have a Material widget as an ancestor, while GestureDetector does not need a Material widget as ancestor.

Mears

Answer 6

Gesture Detector

Gesture Detector is used to detect the user's gestures on the application. It is a non-visual widget. Inside the gesture detector, another widget is placed and the gesture detector will capture all these events (gestures) and execute the tasks accordingly.

InkWell

The InkWell is a rectangular area of a Material widget that responds to touch events by displaying a clipped splash. The Material widget is responsible for the ink effects that are displayed when a touch event occurs. The Material refers to the area where the ink reactions are painted

In simple words, If you want ripple effects go with InkWell or need more controls go with GestureDetector

Fuhrman

Answer 7

The best reason I use Inkwell is the wavy mode effect that gives the user a sense of the program's dynamics. But in cases where I need more controls, I use Gesture.

Andrade

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Sunburn

Answer 8

One other difference between GestureDetector and InkWell widgets that is not mentioned in other answers is that GestureDetector does not let the Widget gain focus when operated with a Keyboard that is connected to the device (say, via bluetooth).

InkWell, on the other hand lets the user gain focus on the widget by pressing Tab key using keyboard, which is the way for a keyboard user to switch between widgets on the screen before selecting them.

Cuneiform