[Flutter] 키보드 appear시 Textfield를 키보드 위로 올리기

하아 

이틀 고생했다. 

Textfield 에 포커싱을 해서 글을 쓸수 있는 상태가 되면 자동적으로 soft keyboard가 올라온다. 

그러면, 보통 이 키보드로 인해서 기존에 있던 위치의 textfield가 가려져서 내가 무슨 글을 쓰는지 올라오지 않는 상태가 되는데, 

iOS에선 keyboard active 상태를 받아서, 키보드 높이를 얻은 후 그만큼을 전체 height 를 offset에 맞게 조정해서...

암튼 굉장히 복잡했는데,

Flutter에서는 너무 간단한 코드가 있다. 

resizeToAvoidBottomInset: true

 

 

Scaffold 하위에 이 코드를 넣어주고, body를 SingleChildScrollView로 감싸주면 

바로 해결이 되는 것이 정상.... 인데 

return Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Column(
      children: [.......

 

 

근데 안된다. 

구글에서 찾아보면, 굉장히 많은 글들이 있다. 

검색어는 

참 많은 글들이 있고, 

대부분 

final bottom = MediaQuery.of(widget.context).viewInsets.bottom;

 

 

build context 안에 이렇게 넣어서, 키보드 높이를 구해서 

해당 높이만큼 보정? 하라는 답이 대부분이다. 

그런데, 문제는 이 코드로 확인해봐도 bottom 값이 계속 0이 나온다는 것이다. 

한숨으로 StackOverflow 를 계속 검색하던 중에 한 댓글을 봤다. 

 

'Flutter - android 의 경우 fullscreenmode가 true 면 작동을 안한다'

 

읭? 이건 또 무슨 소리? 

Project > android > app > src > main > AndroidManifest.xml 파일을 급하게 가서 검색!

을 했는데, fullscreen 같은 단어는 없는데.. 

 

아.. 

처음 찾기 시작할땐, dart 내에서 어떤 코드를 넣어서 저걸 올려야 하는가에 집중하면서 찾아봤는데, 

내 문제의 경우, 코드 문제보다 넓은 범위로 봤어야 했던 거였다. 

안드로이드에서 soft keyboard를 컨트롤 하는 부분을 봐야 하는것이 정답이었다. 

 

바로 이분 글을 보고 무릎을 탁

http://jinyongjeong.github.io/2018/09/30/softkeyboard_hide/

[Android] Android soft keyboard option (안드로이드 키보드 옵션, 자동 키보드 열림 방지) · Jinyong

 

내가 필요했던 부분이 바로

android:windowSoftInputMode=

 

 

이 부분이었다. 

• adjustResize: 키보드가 올라와도 edittext가 UI 화면에 보이도록 activity를 resize

그래서, AndroidManifest.xml 파일에 

android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"

android:windowSoftInputMode="adjustResize" // 추가!!

 

 

이렇게 넣어주고, 

return Scaffold(
  resizeToAvoidBottomInset: true,

 

 

한줄 넣어주니, 해결!