본문 바로가기

Flutter

[Flutter] 화면 일부 영역에 터치 이벤트 넣기, 키보드 숨기기 (GestureDetector)

GestureDetector 외에 Flutter에서 사용자의 동작 (탭, 더블 탭, 롱클릭 등)이벤트를 넘겨 주는 함수인 InkWell이 있지만,

InkWell은 위젯을 터치 시 UI에 효과가 부여된다.

 

GestureDetector는 UI 변화 없이 이벤트만 감지하기 때문에,

화면 터치시 UI 변화 없이 표출되고 있는 키보드만 숨기기 위해 GestureDetector를 사용하였다.

 

 
1
2
3
4
5
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => FocusScope.of(context).unfocus(),
child: Container()
),
cs

 

키보드를 숨기기 위해서는 FocusScope.of(content).unfocus() 호출시 표출되어 있는 키보드가 사라진다.

 

참고로,

GestureDetector는 기본적으로 child로 아무리 큰 영역을 잡아도 최종 실제 위젯의 크기만큼만 터치 영역이 정해진다.

child의 전체를 터치 영역으로 정하기 위해서는 위 코드처럼 behavior를 translucent로 설정해주면 된다.

 

'Flutter' 카테고리의 다른 글

[Flutter][iOS] Build Version 맞추기  (1) 2022.10.21
[Flutter 2.0] ElevatedButton / OutlinedButton  (0) 2021.06.08
Flutter 입문용 자료 공유  (0) 2021.03.19