게시글
velca
벨바카
3주 (수정됨)
[Flutter/flutter_inappwebview] 키보드 레이어 표시 시 WebView 리사이즈 방지

flutter_inappwebview 를 사용하던 도중 키보드 레이어가 표시될 때 WebView 영역이 리사이즈 된다는 것을 알았다. 근데 키보드가 짠 하고 나타나는 게 아니라 슬라이드하며 나타나다 보니 resize 이벤트가 여러 차례 호출되게 되고, 이는 곧 화면의 버벅임으로 이어졌다.

잠깐이지만 아주 심기가 불편한 상황이기 때문에 해결책을 알아보다 다음과 같은 방법으로 해결했다.

return MaterialApp(
  home: SafeArea(
    child: Scaffold(
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height -
              MediaQuery.of(context).viewPadding.top,
          child: WebViewScreen(),
        ),
      ),
    ),
  ),
);

기존 코드는 SafeArea.body 에 직접 WebViewScreen 이라는 WebView 표시를 위한 위젯을 표시했었는데 SingleChildScrollViewContainer 위젯으로 감싸줬다.

처음에는 Container 위젯을 이용해 WebView 영역의 크기를 고정해줬다. 이렇게 하니 키보드 레이어가 표시돼도 리사이즈 이벤트가 발생하지 않았지만, 문제는 키보드 레이어에 가려진 부분을 볼 수 없었다.

그래서 내부 영역의 overflow를 스크롤 할 수 있게 만들어주는 SingleChildScrollView 위젯으로 한 번 더 감싸줬더니 정상적으로 작동했다.

#Flutter #WebView #flutter_inappwebview #키보드리사이즈 #하이브리드앱 #위젯트리 #MediaQuery #SingleChildScrollView #Column #Expanded #UX최적화