삶은 개발

한국어 카테고리

Inkwell, GestureDetector 차이점 – Flutter

Flutter에서 입력 event 를 다룬다고하면 GestureDetector 가 가장 먼저 떠오른다. 그래서 GestureDetector를 활용해서 개발을 아무생각없이 하곤 했다. 그러다가 갑자기 Inkwell이라는 widget이 나올 때마다 다시 인터넷을 검색하곤 한다.

더 이상 검색을 하지 않기 위해서 기록한다.

GestureDetector 와 Inkwell은 같은 것이다. 둘 다 Widget의 이벤트의 핸들링을 처리한다.

inkwell은 표현 그대로 ink가 drop된 well 효과라는 뜻이고, 이 부분에 gesture에대한 처리는 어디에도 언급이 없다… 정말 작명법 개빡친다.
잉크가 떨어진 효과가 나는 제스처 처리기라는 뜻으로 보인다.

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

효과를 캡쳐해서 넣기 귀찮다. 링크로 대신한다.

물론 그 외에도 차이점이 존재한다. inkwell은 버튼효과에 가까운 방향성을 가지고, GestureDetector는 다양한 gesture의 처리를 지향한다.

소유한 이벤트의 종류를 보자

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, tertitary 는 두번째 버튼, 제삼의 버튼 이라는 뜻으로 마우스 같은 장치를 사용해야 입력이 처리된다.
되는 줄알고 넣어서 테스트해보았으나 안되더라. 손가락 2개로 하는 drag와 1개로 하는 drag를 구분하고자 했는데, 안되더라. 되나?
gesture 의 종류에 대한 링크이다.
https://blog.logrocket.com/handling-gestures-flutter-gesturedetector/

검색어는 “flutter detect scroll with multi finger” 로 검색하였다. 쓸만한 답변은 하나뿐이었다.
https://stackoverflow.com/questions/68133894/how-to-make-gesturedetector-detect-two-finger-drag-in-flutter-web

언제든 두손가락으로 스크롤하면 되도록 할 수 있게 되었다.

알고리즘은 첫번째 터치때 2개 포인트까지 확인이 되었는지, 그 이후에 드래그를 처리한다 라는 알고리즘이다. 좋네

RawGesture 처리에 대한 링크도 있다.
https://api.flutter.dev/flutter/gestures/BaseTapAndDragGestureRecognizer-class.html

끝