안녕하세요.
이 반년은 공부해 온 Flutter를 마음껏 실무로 이용할 수 있는 시간이었습니다.
요 전날, 무사히 앱을 릴리스 할 수 있었으므로, 여러가지 과제를 극복하면서 쌓아 온 노트를 슬슬 정리해 아웃풋 하려고 생각합니다.
아무쪼록 잘 부탁드립니다.

개요

스마트 폰 앱을 만들 때는 다양한 기종의 장치 크기, 가로 모드와 세로 모드, 키보드 등장 등 다양한 화면 크기에 대응하지 않으면 갈 수 없습니다.
응답 디자인으로 다양한 화면 크기를 대응하는 것이 가장 좋지만 화면의 Widget이 복잡해질수록 리소스 부족 등으로 거기까지 대응하지 않는 경우가 있네요.
그러나 앱을 공개하고 불특정 다수가 이용하는 경우에는 아무것도 대응하지 않으면 결국 UI 붕괴나 Overflows 에러 등이 발생합니다.
이번은 그 대응 속에서 키보드를 열어 대응의 이야기를 합니다.

대응 내용

Flutter의 기본값은 키보드를 여는 것과 같은 레이어에서 열리기 때문에 UI를 위로 밀어 넣습니다.
간단한 UI는 고맙습니다. Widget을 복잡하게 배치하면 문제가 발생합니다.
Expanded등으로 상대적으로 사이즈를 결정해 주는 실장했을 경우는 UI 무너지고, 고정 사이즈가 되었을 경우는 Overflows 에러가 나옵니다.

적당히 예의 화면을 만들었습니다만, 예를 들면 이하와 같은 Overflows 에러가 발생한다고 합니다.


응답 디자인으로 대응하지 않고 해결하기 위해서는 2개의 대응이 필요합니다.

대응 1. 키보드를 같은 레이어가 아닌 상단의 레이어에 올려놓는 설정을 합니다.

이 대응은 Scaffold의 옵션을 조정하여 쉽게 대응할 수 있습니다.

    return Scaffold(
      resizeToAvoidBottomInset: false,

대응 2. 키보드의 레이어에 숨겨진 곳을 표시시킵니다.

위의 대응 1만으로는, 키보드의 레이어에 하단의 곳이 숨겨져 사용할 수 없게 됩니다.
따라서 화면 하단에 키보드 크기의 공백을 넣어 화면이 크기를 초과하면 스크롤이 들어갑니다.
물론, 그 공백은 키보드가 열렸을 때만 합니다.

    body: SafeArea(
      child: SingleChildScrollView(

     //...省略

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

위와 같이 대응하면 다양한 Widget 사이즈를 응답적으로 대응하지 않고 쉽게 해결할 수 있습니다.