Flutter - Inkwell, GestureDetector, 터치 클릭 인식

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 사용자의 터치 혹은 클릭 그에 더해서 길게 누르기, 두번 누르기 등 모든 사용자 제스처를 인식할 수 있는 위젯 GestureDetector를 배워보도록 하겠습니다. 

 

Flutter GestureDetector

GestureDetector(
  onTap: () {
    print("Button Clicked!");
  },
  child: Container(
    color: Colors.yellow.shade600,
    padding: EdgeInsets.all(50),
    child: Text('PRINT'),
  ),
),

GestureDetector는 사용하기 아주 간편한 위젯 중 하나 입니다. GestureDetector의 child에 클릭 효과를 주고 싶은 위젯을 넣어주면 됩니다. 또 GestureDetector의 크기는 기본적으로 child를 참조합니다. 만약 child가 없으면 parent에게 맞게 커집니다. 또 투명한 child는 GestureDetector가 터치를 무시합니다. 이는 behavior로 제어할 수 있습니다.

 

보통의 경우는 onTap: () {}만 사용하셔도 크게 불편함은 없지만 GestureDetector는 onTap 말고도 여러가지 많은 기능이 있습니다.

onTap: () {},
onDoubleTap: () {},
onLongPress: () {},
onVerticalDragStart: () {},
onHorizontalDragStart: () {},
onForcePressStart: () {},
onPanStart: () {},
onScaleStart: () {},

모바일 및 PC로 구현되는 모든 제스처를 인식할 수 있습니다. 위에 나열한 것 외에도 많이 있으니 직접 확인해보시면 될 것 같습니다.

 

그런데 GestureDetector에는 치명적인 단점이 있습니다. 보통 모바일 앱 혹은 PC 라도 클릭을 하면 클릭 한 것이 눈에 확인되게 시각적 효과가 보통 들어갑니다. 그런데 GestureDetector에는 그런 기능이 없습니다. 그래서 단순 클릭 보다는 드래그 앤 드랍 같은 경우에 많이 사용도고 단순 클릭은 Inkwell을 자주 사용합니다. 

 

Flutter Inkwell

Inkwell은 사용자 터치에 반응하는 위젯입니다. 터치를 하면 터치 한 부분을 중십으로 파동?이 일어납니다. 또 Inkwell 위젯은 부모 중에 꼭 Material widget이 있어야 합니다. 근데 딱히 신경쓰실 필요는 없습니다. 일반적으로 Flutter 앱 개발은 MatrielApp을 가장 기초로 시작합니다.

InkWell(
  onTap: () {
    print("Button Clicked!");
  },
  child: Container(
    padding: EdgeInsets.all(50),
    child: Text('PRINT'),
  ),
),

위에 코드를 복사하여 사용해보시면 아시겠지만, InkWell은 클릭하면 파동? 물결?이 퍼져나갑니다. 

onTap: () {},
onLongPress: () {},
onDoubleTap: () {},
onHover: () {},
onTapDown: () {},

InkWell도 onTap 외에도 많은 기능이 있습니다. 보통은 onTap이나 onLongPress를 많이 사용하는데 필요에 따라 사용해보시면 좋을 것 같습니다. 

focusColor: Colors.red,
highlightColor: Colors.black,
hoverColor: Colors.blue,
splashColor: Colors.yellow,

InkWell은 여러 색상 설정도 가능하니 하나씩 해보시면서 익히시면 좋습니다.