#Flutter. GestureDetector: 사용자 동작감지 위젯

 

GestureDetector는 Flutter에서 제공하는 위젯 중 하나로, 사용자의 터치 제스처(터치, 드래그, 꾹 누르기 등)를 감지하고 처리하는 기능을 제공한다. 이를 통해 사용자 상호 작용을 감지하고 이벤트를 처리할 수 있다.

 

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

GestureDetector class - widgets library - Dart API

 

1. onTap: 사용자가 위젯을 탭할 때 호출되는 콜백 함수를 지정합니다.
2. onDoubleTap: 사용자가 위젯을 더블 탭할 때 호출되는 콜백 함수를 지정합니다.
3. onLongPress: 사용자가 위젯을 길게 누를 때 호출되는 콜백 함수를 지정합니다.
4. onVerticalDragDown/onVerticalDragEnd/onVerticalDragUpdate: 사용자의 수직 드래그 동작에 대응하는 콜백 함수들을 지정합니다.

이 외에도 굉장히 많은 기능이 있지만 오늘은 가장 기본적인 기능인 onTap을 사용하여 페이지 전환을 해볼 것이다.

 

적용 방법은 간단하다. 터치하면 이벤트를 발생할 부분을 GestureDetector 로 묶고 어떤 이벤트가 발생할 것인지 설정해주면 된다.

api로 받아온 이미지를 GestureDetector로 묶고 기능은 onTap()

 

우선 GestureDetector이 잘 동작하는지 확인하기 위해 onTap하면 클릭했음을 출력해보자.

 

 

'if you click...' 이 잘 출력되는것을 확인하였다. 

 

이제 onTap이 발생하면 DetailScreen으로 화면이 전화되도록 해보자.

 

 

이렇게 Navigator.push를 하고 페이지는 MaterialPageRoute로 DetailScreen을 지정해주면...

 

HomeScreen

 

원하는 이미지를 눌렀을때 

 

DetailScreen

 

DetailScreen으로 이동하는것을 확인 할 수 있다. 

 

GestureDetector을 사용하면 다양한 상호작용을 활용할 수 있다!!