[Flutter/플러터] 키보드 overflowed 문제 해결하기(키보드 열림 무시)

 

 

 

1) 키보드가 위젯을 가리는 경우

다음과 같이 BOTTOM OVERFLOWED BY... 에러가 발생한다.

 

 

이를 해결하기 위한 방법은,

첫번째로 가려진 위젯의 제일 상위 위젯을 

child : Column(
	children : [
    	Container(
        	...
            ),
            ...

아래와 같이 SingleChildScrollView로 감싼다. 

child: SingleChildScrollView(
          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
          child: Column(
            children: [
              Container(
                alignment: Alignment.centerLeft,
                ...
                ),

여기서 중요한 것은, 아래 코드를 넣는 것이다. 

keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,

 

 

 

2) 키보드 열린 채로 뒤로가기 버튼을 누르거나, 텍스트 제출과 버튼을 눌렀을 때 나타나는

    overflowed 문제 해결하는 방법이다.

 

child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          ...

 

위젯을 GestureDetector로 감싼 뒤, 위와 같이 코드를 작성해준다.

HitTestBehavior.opaque란 

범위 내에서 이벤트를 수신하며, 시각적으로 뒤에있는 타겟 또한 이벤트를 수신할 수 있도록 하는 것이다.

 

사용자가 해당 위젯 외 부분을 tap 하면 unfocus를 하도록 한다.