[Flutter] TextField Focus 해제

키보드의 완료 버튼을 누르면 기본적으로 키보드가 내려가면서 포커스도 해제되지만,

꼭 완료 버튼을 누르지 않아도 배경을 터치했을 때나 특정 버튼을 눌렀을 때 키보드를 내리고 싶을때가 있다.

 

텍스트필드의 포커스를 해제시키고 싶을 때 사용할 수 있는 방법!

 

1. FocusNode 객체를 생성한다.

FocusNode textFocus = FocusNode();

 

2. TextField 위젯에 생성한 FocusNode를 연결한다.

TextField(	
	maxLines: 1,
	focusNode: widget.textFocus,
)

 

3. 원하는 이벤트가 발생했을 때 unfocus 해준다.

widget.textFocus.unfocus();

 

여기서 원하는 이벤트 예시 ---> 텍스트필드가 아닌곳을 선택했을때 혹은 버튼을 눌렀을때

1) 텍스트필드가 아닌 다른곳을 눌렀을 때 포커스를 없애고싶다면

전체 화면에서 이벤트를 받아야되기때문에 MaterialApp를 GestureDetector로 감싸준다.

onTap 이벤트가 발생했을 때 unfocus 해준다.

GestureDetector(
      onTap: (){
          widget.textFocus.unfocus();
      },
      child: MaterialApp(
      )
      
      ...생략
)

 

2) 특정 버튼을 눌렀을때 포커스를 없애고싶다면

특정버튼의 onPressed 이벤트가 발생할 때 unfocus 해준다.

TextButton(
	onPressed: () {
    	widget.textFocus.unfocus();
    }
)