TextFormField 클릭 시 오버플로( overflow ) 발생

해당 이슈는 스크롤을 사용하지 않는 화면에서 TextFormField을 클릭할 때 자주 발생합니다. 
스크롤이 사용해도 무방하다면 하기 링크의 글을 참고하세요. 

2021.12.28 - [Flutter(플러터)/UI] - TextFormField 클릭 시, 키보드가 덮어버릴 때

TextFormField 클릭 시, 키보드가 덮어버릴 때

 

가능하면 스크롤을 넣어서 해결하라고 하고 싶지만, 불가피하게 사용해야 한다면 하기 방법을 사용하시기 바랍니다. 

return Scaffold(
      resizeToAvoidBottomInset : false,
      body: Container(),
    );

resizeToAvoidBottomInset (resizeToAvoidBottomPadding-deprecated): Scaffold 내 위젯의 높이가 키보드의 크기에 따라서 자동으로 재조정하는 것을 의미합니다. true가 기본값입니다. 

아니 그럼 왜 문제가 되는거지? 라고 생각이 듭니다.
재조정하면서 body 부분이 화면을 밀어 조정할 공간이 부족하여 오버플로(overflow)가 발생합니다. 
그럼 false로 적용하면 어떻게 될까요? 오버플로는 해결이 되지만 위에 말씀드린 것과 같이 화면에 따라 입력창을 덮어버립니다. 

화면에 맞게 다양한 방법을 사용하시길 바랍니다. 

하나 더!
bottomSheet을 사용하는 Scaffold에서는  resizeToAvoidBottomInset: false 로 하게 되면 
키보드가 올라올 때 bottomSheet을 가려버립니다. 
이 때 키보드와 함께 bottomSheet을 올려주시고 싶으시면, bottomSheet에 Padding 값 내에 bottom 패딩을 MediaQuery.of(context).viewInsets.bottom으로 넣어주시면 됩니다. 위 방식은 키보드에 의해 가려진 부분의 크기를 가져와서 자동으로 bottomSheet의 bottom 패딩 값을 변경함으로 키보드 위로 올라오도록 해줍니다. 

코드는 다음과 같습니다. 

 bottomSheet: Padding(
            padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container()),