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 표시를 위한 위젯을 표시했었는데 SingleChildScrollView
와 Container
위젯으로 감싸줬다.
처음에는 Container
위젯을 이용해 WebView 영역의 크기를 고정해줬다. 이렇게 하니 키보드 레이어가 표시돼도 리사이즈 이벤트가 발생하지 않았지만, 문제는 키보드 레이어에 가려진 부분을 볼 수 없었다.
그래서 내부 영역의 overflow를 스크롤 할 수 있게 만들어주는 SingleChildScrollView
위젯으로 한 번 더 감싸줬더니 정상적으로 작동했다.
#Flutter #WebView #flutter_inappwebview #키보드리사이즈 #하이브리드앱 #위젯트리 #MediaQuery #SingleChildScrollView #Column #Expanded #UX최적화