[Flutter] TextField 바깥 영역을 터치 했을 때 키보드가 감춰지게 만들기

Flutter의 TextField는 유저의 인풋을 받기 위해 사용하는데 한번 Focus가 들어가면 키보드의 "완료" 버튼을 누르거나 키보드 감추기 버튼을 누르지 않으면 키보드가 화면에서 사라지지 않는다.

이번 포스트에서는 TextField의 바깥 영역을 사용자가 터치 했을 때 키보드가 감춰지게 만드는 법에 대해서 간단하게 알아본다.

onTapOutside

TextField 위젯에는 onTapOutside 라는 설정을 할 수가 있다. 말 그대로 TextField의 바깥 영역이 탭 되었을 때 무엇을 할 건지에 대한 기능을 설정할 수 있는 항목이다.

화면에 키보드가 나타나는건 TextField에 Focus가 활성화 되어서 그런 것이기 때문에 Focus를 비활성화 해주면 키보드도 감춰지게 된다.

화면의 어느 부분에 Focus가 활성화 되어있는지는 FocusManager 클래스에서 관리가 되고 있다.

TextField(
	//..다른 코드는 생략
    onTapOutside: (event) => FocusManager.instance.primaryFocus?.unfocus(),
)

위와 같이 설정해주면 TextField 바깥 영역을 터치 했을 때 Focus가 비활성화되면서 키보드도 같이 감춰지게 된다.

이전에는 GestureDetector 로 스크린 요소를 감싸서 설정하는 등 약간의 핵 느낌의 솔루션 밖에 없었지만 TextField 자체에 onTapOutside 요소가 추가되면서 아주 간편하게 설정 할 수 있게 되었다.

TextField 클래스의 공식 문서는 아래 링크에서 확인 할 수 있다.

TextField class - material library - Dart API

API docs for the TextField class from the material library, for the Dart programming language.

Dart API