Flutter 앱에서 iOS 키보드 높이 변경 시 레이아웃 깨짐 해결

문제 상황

회원가입 폼을 구현하던 중 iOS 실기기에서 TextField 포커스 시 키보드에 입력창이 가려지는 현상이 발생했다. Android에서는 정상 동작했지만 iOS에서만 레이아웃이 제대로 조정되지 않았다.

원인 파악

Scaffold의 resizeToAvoidBottomInset 속성이 true임에도 불구하고, SingleChildScrollView 내부의 Column 높이가 고정되어 있어 키보드가 올라와도 스크롤이 되지 않았다.

해결 방법

MediaQuery.of(context).viewInsets.bottom을 활용해 키보드 높이만큼 하단 패딩을 동적으로 추가했다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: true,
    body: SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: '이메일'),
            ),
            TextField(
              decoration: InputDecoration(labelText: '비밀번호'),
            ),
          ],
        ),
      ),
    ),
  );
}

추가 개선

TextField 포커스 시 해당 위젯이 화면에 보이도록 ensureVisible() 메서드를 사용하는 방법도 있지만, 현재 프로젝트에서는 viewInsets 조정만으로 충분했다.

iOS 시뮬레이터에서는 문제가 재현되지 않아 실기기 테스트가 필수였다는 점을 배웠다.