[Flutter] WebView 사용 시 Keyboard 가림 문제 해결

앱 내에 웹뷰를 이용하다보면 만나는 문제중 하나인데 바로 웹뷰 내에서 Input Tag를 사용했을 때 해당 요소가 키보드에 가리는 문제다.

검색 결과로 다양한 해결방법이 있었는데 앱과 맞지 않아서 직접 JavaScript 를 이용하여 수정하기로 했다. Scaffold를 이용하라 SingleChildScroll을 이용하라 등 다양한 해결책이 인터넷에 있는데 바로 해결이 되는 경우도 있지만 현재 앱 내에서 사용하는 웹뷰 환경과 맞지 않을 수있다. 아래 해결한 방법은 JavaScript를 이용하여 해결한 방법으로 더 좋은 방법이 있을 수 있다. 여러 해결 방법 중 하나라고 생각하면 될 것 같다.

웹뷰 내에서 Input Tag 요소의 위치를 확인하여 키보드에 가려질 시 Padding 을 추가하여 키보드에 가리지 않도록 하는것이 목표이다.

개선된 결과물

적당한 사이트를 찾아보다가 발견..

1. WebView 내 Focus 된 Input 요소 확인(사용자 클릭 시, 키보드에서 '다음' Input 요소로 이동)
2. Input 요소의 bottom 값 확인
3. Keyboard Height 확인 후 Input bottom 값을 비교
4. Input bottom > Keyboard Height 일 경우 스크롤 X
5. Input bottom < Keyboard Height 일 경우
6. Keyboard Height - Input bottom 값 만큼 Padding 추가

Keyboard Height 의 경우 디바이스 마다 다르고, build 내에서 확인을 수행하고 있기 때문에 RxDart의 Stream을 이용하여 중복값과 JavaScript를 이용한 계산을 최적화 했다.

Flutter WebView plugin 으로는 flutter_inappwebview를 사용했다.

기본적으로 WebView의 경우 Height 가 infinite 처리 되어있어 다른 위젯과 사용하기 위해서 LayoutBuilder로 constraints 를 계산하여 사용하고 있다. 단일로 WebView 사용시 굳이 필요 없긴 하다.

모든 환경에 대응할 수는 없지만. 현재 프로덕트에 잘 어울리는 결과물을 얻을 수 있었다.