Flutter TextFieldWidget 키보드 자판 OverFlow 현상 해결 방법

SingleChildScrollView 위젯을 이용해 오버플로우 방지

TextField Widget 이란 텍스트 정보를 입력받고자 할 때 사용하는 텍스트 입력 위젯이다.

TextField Widget 클릭시 시뮬레이터 하단에서 키보드 자판이 올라오게 되는데, 이 때  올라오는 키보드 자판은 화면 절반의 크기를 차지하게 된다. 

이 때 텍스트 필드 위젯을 사용하는 스크린 내부의 위젯들이 전체 화면 절반 이상의 크기를 차지하고 있다면 다음과 같이 OverFlow 현상이 발생하여 화면 잘림 에러를 발생시키게 된다.

해결 방안은 간단한데, 페이지를 스크롤 가능하도록 SingleChildScrollView Widget으로 감싸 주는 것이다. 

그러면 다음과 같이 화면이 스크롤 가능 하도록 변경되어, 키보드 자판이 올라와 화면 절반 이상의 크기를 차지 하더라도 overflow 현상을 방지할 수 있다. 

	SingleChildScrollView(
        child: SafeArea(
        ...
    )

 

keyboardDissmissBehavior 속성을 이용한 ux 개선

현재 TextFieldWidget을 클릭 시 하단에서 올라는 키보드 자판은 'done' 버튼을 클릭 해야 지만 자판이 사라지는데, 대부분의 앱은 사용자 편의를 위해 키보드 자판 이외의 화면을 클릭 하면 자동으로 자판이 내려 가도록 설계 되어 있다.

앞서 소개한 SingleChildScrollView 위젯의 keyboardDissmissBehavior 라는 속성을 이용하면 이를 쉽게 구현할 수 있다.

ScrollViewKeyboardDissmissBehavior.manual : [default] done 버튼을 클릭 시 키보드 자판이 닫힘

ScrollViewKeyboardDissmissBehavior.onDrag : 화면을 스크롤 하면 키보드 자판이 닫힘

	SingleChildScrollView(
        keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
        child: SafeArea(
        	...
        )