Flutter: InkWell vs GestureDetector: what is the difference?

user_5347169 0
Viewed 25651

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?

flutter-layout flutter
6 Answers

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,
  ),
)

enter image description here

user_66186220

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!

user_107521690

Visual Difference

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

user_73402890

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.

user_22853150

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.

user_106272610

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

user_51977120
Related