Flutter 앱에서 iOS 키보드 오버레이 문제 해결

문제 상황

채팅 기능을 구현하던 중 iOS 기기에서 키보드가 올라올 때 하단 입력창이 키보드에 가려지는 문제가 발생했다. Android에서는 정상 동작했지만 iOS에서만 재현되었다.

시도한 방법들

먼저 Scaffold의 resizeToAvoidBottomInset 속성을 true로 설정했다.

Scaffold(
  resizeToAvoidBottomInset: true,
  body: ChatScreen(),
)

그러나 여전히 키보드가 입력창을 가렸다. 특히 SafeArea 내부에서 Column 구조로 레이아웃을 잡았을 때 문제가 심했다.

해결 방법

MediaQuery.of(context).viewInsets.bottom을 활용해 키보드 높이만큼 padding을 추가했다.

Widget build(BuildContext context) {
  final bottomInset = MediaQuery.of(context).viewInsets.bottom;
  
  return Scaffold(
    resizeToAvoidBottomInset: false,
    body: Column(
      children: [
        Expanded(child: MessageList()),
        Container(
          padding: EdgeInsets.only(bottom: bottomInset),
          child: MessageInput(),
        ),
      ],
    ),
  );
}

핵심은 resizeToAvoidBottomInset을 false로 두고, 직접 viewInsets 값을 이용해 padding을 조절하는 것이었다. 이렇게 하니 iOS에서도 키보드가 올라올 때 입력창이 자연스럽게 따라 올라갔다.

추가 개선

Keyboard Visibility 패키지를 사용해 키보드 상태를 감지하고, 애니메이션을 추가했다.

AnimatedPadding(
  padding: EdgeInsets.only(bottom: bottomInset),
  duration: Duration(milliseconds: 200),
  curve: Curves.easeOut,
  child: MessageInput(),
)

단순한 문제였지만 Flutter의 iOS 키보드 처리 방식을 이해하는 데 도움이 되었다.