[flutter] GestureDetector, TextField 외부 클릭 시 키보드 숨기기

입력 창에서 바깥 영역을 누르면 키보드가 사라지게 해보자~

 

그러려면 GestureDetector 를 알아야한다

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

GestureDetector class - widgets library - Dart API

 

 

여기보면 위젯이 child가 있으면 크기 조정하는 동작이 child를 따른다고... child가 없으면 parent 에 맞게 sizing 한다고 쓰여있음 ( If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead.)

 

이 부분 때문에 좀 고생했는데 결국 아래 사이트에서 해당 내용을 찾았다

https://www.woolha.com/tutorials/flutter-hide-keyboard-on-tap-outside-text-field

Flutter - Hide Keyboard on Tap Outside Text Field

 

 

텍스트필드가 들어있는 container 위에만 배치했더니 다른 외부 위젯에서 발생하는 탭을 감지하지 못해서

Scaffold 위젯을 아예 child로 작성했더니 부드럽게 작동했다.

 

 

 

코드는 아래에

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        //FocusManager.instance.primaryFocus?.unfocus();
        FocusScope.of(context).unfocus();
      },
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.all(50),
                  child: TextField(
                    decoration: InputDecoration(labelText: 'Input1'),
                    onChanged: (text) {
                      setState(() {
                        _fieldText1 = text;
                      });
                    },
                  )),
                  ...
             ]
          )
       )
    );