삶은 개발

한국어 카테고리

Inkwell, GestureDetector difference – Flutter

When it comes to handling input events in Flutter, GestureDetector often comes to mind first. So, I used to develop using GestureDetector without much thought. But whenever the InkWell widget appears, I find myself searching the internet again.

I’m documenting this so I don’t have to search anymore.

GestureDetector and InkWell are the same in that they both handle events for widgets.

InkWell literally means a well effect where ink has dropped, and there’s no mention of gesture handling in this area… really, the naming is frustrating. It seems to mean a gesture handler that creates an effect of ink dropping.

https://api.flutter.dev/flutter/material/InkWell-class.html

It’s bothersome to capture and insert the effect, so I’ll substitute it with a link.

Of course, there are also differences. InkWell leans towards a button-like effect, whereas GestureDetector aims to handle a variety of gestures.

Let’s look at the types of events they each handle.

Inkwell

    super.onDoubleTap,
    super.onLongPress,
    super.onTapDown,
    super.onTapUp,
    super.onTapCancel,
    super.onSecondaryTap,
    super.onSecondaryTapUp,
    super.onSecondaryTapDown,
    super.onSecondaryTapCancel,
    super.onHighlightChanged,
    super.onHover,

GestureDetector

this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onSecondaryTap,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onTertiaryTapDown,
    this.onTertiaryTapUp,
    this.onTertiaryTapCancel,
    this.onDoubleTapDown,
    this.onDoubleTap,
    this.onDoubleTapCancel,
    this.onLongPressDown,
    this.onLongPressCancel,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    this.onSecondaryLongPressDown,
    this.onSecondaryLongPressCancel,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onTertiaryLongPressDown,
    this.onTertiaryLongPressCancel,
    this.onTertiaryLongPress,
    this.onTertiaryLongPressStart,
    this.onTertiaryLongPressMoveUpdate,
    this.onTertiaryLongPressUp,
    this.onTertiaryLongPressEnd,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,
    this.onPanDown,
    this.onPanStart,
    this.onPanUpdate,
    this.onPanEnd,
    this.onPanCancel,
    this.onScaleStart,
    this.onScaleUpdate,
    this.onScaleEnd,

Secondary and tertiary refer to the second and third buttons, respectively, and require the use of a device like a mouse for the input to be processed. I thought it would work, so I tested it, but it didn’t. I wanted to differentiate between a two-finger drag and a one-finger drag, but it didn’t work. Does it?

Here is a link about the types of gestures: https://blog.logrocket.com/handling-gestures-flutter-gesturedetector/

I searched using “flutter detect scroll with multi finger”. There was only one useful answer. https://stackoverflow.com/questions/68133894/how-to-make-gesturedetector-detect-two-finger-drag-in-flutter-web

Now, it is possible to make it work with a two-finger scroll whenever needed.

The algorithm is to check if two points are detected at the first touch and then process the drag afterwards. That’s nice.

There is also a link about RawGesture handling: https://api.flutter.dev/flutter/gestures/BaseTapAndDragGestureRecognizer-class.html

End