TextField가 keyboard 에 가려지는 문제

TextFiled가 포커싱 되었을 때 생성되는 keyboard에 의해 가려진다면, TextField를 보이는(visible) 영역으로 가져오면(스크롤하면) 된다. 

 

그러기 위해서는 우선 TextFiled가 scroll 가능한 widget에 쌓여져 있어야 한다. 보통 SingleChildScorllView를 이용해서 감싸고 child 에는 Column 을 이용해서, 표시하고자 하는 위젯들을 나열한다. 이 중에 TextForm filed 가 있을 것이다. 

 

이제 keyboard가 생성되어었을때 스크롤을 얼마나 해야하는지 알아와야 한다. 

soft keyboard 는 system UI 이다. 

System UI에 의해 가려지는 크기를 받아오는 코드는 아래와 같다. 

MediaQuery.of(context).viewInsets

keyboard는 화면의 아래 쪽에서 올라와서 생성되므로 viewInsets 중 bottom 값을 가져오면된다. 

MediaQuery.of(context).viewInsets.bottom

 

이 값을 TextField 의 scrollPadding 파라미터에 bottom padding 값으로 넣어준다. 

TextFormField(
      scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      //(생략)
)

그리고 위에서 scorllPadding 을 넣어준 만큼 SingleChildScrollView 아래에도 여유 공간을 넣여줘야한다. 스크롤 할 공간이 있어야 스크롤이 가능하기 때문이다. 따라서 아래의 코드를 column 맨 아래에 넣어준다. 

SizedBox(height: MediaQuery.of(context).viewInsets.bottom),

참고: page 가 Scaffold 를 사용하고 있다면 resizeToAvoidBottomInset 은 false 로 해야 하는 것 같음....내 코드에서는 scaffold를 사용하지 않아 테스트 해보지는 못함

 

참고자료

스택오브플로에서 봤던 자료 못찾겠음

https://seosh817.tistory.com/144