APP/Flutter

[flutter] textfield 외부 화면 클릭으로 키보드 숨기기

KIM DEON 2022. 4. 9. 18:45

TextField에서 multiline keyboard를 사용하는 경우 keyboard에 submit 버튼이 존재하지 않는다. 

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
  decoration: InputDecoration(
  	border: OutlineInputBorder(),
  ),
)

 

특정 위젯에서 사용하는 TextField를 외부 화면 클릭으로 숨기려면, 해당 widget을 포함한 전체 screen을 GestureDetector로 감싼 후 onTap에 FocusManager.instance.primaryFocus?.unfocus(); 를 추가한다.

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: ()=> FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
          appBar: _buildAppBar(context),
          body: _buildBody(),
          floatingActionButton: _buildBottomButtons(context)),
    );

* FocusManager.instance.primaryFocus가 해당 widget tree에서 현재 focus를 가지고 있는 node를 반환한다.