[Flutter] 화면 클릭 감지 (TextButton, GestureDetector) [맥북 💻]

 목차

1. 화면 클릭 감지
   
   1. TextButton
      1. onPressed
   2. GestureDetector
      1. onTap
      2. onDoubleTap
      3. onLongPress
      4. onPanUpdate

 

 

 

✅ 화면 클릭 감지

 

 

1️⃣ TextButton

• 글자 형태의 버튼 위젯
• 주로 사용자에게 버튼임을 명확히 보여줄 때 사용
• onPressed : 버튼 눌렀을 때 실행할 기능
• child : 버튼 안에 들어갈 (하위)위젯 (보통 Text()를 사용)

 

 

2️⃣ GestureDetector

• 제스처(손동작)를 감지하는 위젯
• TextButton 위젯과 달리 별도의 UI 없이 손동작을 감지하는 위젯
  ** Container()를 사용하여 UI를 만들 수 있으나 생략해도 무방 (UI 범위 만큼 제스처 감지 범위가 설정됨)
• 주요 속성
  • onTap : 가볍게 한번 탭했을 때 실행
  • onDoubleTap :  연속 두 번 탭했을 때 실행
  • onLongPress : 길게 누르고 일정 시간 이상 유지하면 실행
  • onPanUpdate : 드래그 동작 중 위치가 바뀔 때마다 실행
    ** onTap, onDoubleTap, onLongPress 3가지의 작동은 비슷
    ** onPanUpdate 는 별도로 전달할 콜백 객체 필요
• child : 버튼 안에 들어갈 (하위)위젯

 

1-1. onTap 예시 (UI 생성 -> 해당 UI 내에서만 기능함)

1-2. onTap 예시 (UI 미생성 -> AppBar 전체 영역에서 기능함)

2. onPanUpdate 예시