[Flutter]키보드 오버플로우 해결

해당 문서는 flutter 2.8.1 / Dart 2.15.1 에서 작성된 코드를 기반으로 작성했습니다.

키보드 오버플로우란?

본 글에선 사용자로부터 입력값을 받을 때 키보드가 올라오면서 화면에 오버플로우가 발생하는 현상을 말합니다. TextField 를 사용하실 때 심심치 않게 볼 수 있어 TextField overflow 해결 방법으로도 알려져 있습니다.
vscode를 이용하신다면 Debug 콘솔창에서 A RenderFlex overflowed by ~ pixels on the bottom. 라는 에러 문구도 볼 수 있습니다.

해결 방법

해결 방법은 크게 두가지로 나눌 수 있고 용도에 따라 쓰임이 다를 수 있습니다.

[1]resizeToAvoidBottomInset

용도
키보드가 올라와도 텍스트 필드 영역이 온전하게 보일 때 사용하기 좋습니다.

사용 방법
scaffold 의 속성 resizeToAvoidBottomInset 을 false로 설정합니다.

/* lib/main.dart */
(생략)
return Scaffold(
	resizeToAvoidBottomInset: false,
    appBar: AppBar()
    body: ~
);

[2]SingleChildScrollView

용도
키보드가 올라왔을 때 텍스트 필드 영역이 온전하게 보이지 않을 때 사용하기 좋습니다. 적용 시 키보드가 올라왔을 때 스크롤이 가능합니다.

사용 방법
scaffold 의 body 속성에 적용되어 있었던 위젯을 SingleChildScrollView 위젯으로 감싸줍니다

 return Scaffold(
        appBar: AppBar(생략),
        body: SingleChildScrollView(
          child: Container(
          	생략
          )));

오타, 오개념 지적 환영합니다! 읽어주셔서 감사합니다😀