개발/Flutter

Flutter TextField 클릭 시 전시된 키보드에 화면이 가려지는 상황 해결 방법

안녕진 2022. 2. 23. 00:05

상황

Column등으로 화면을 구성했을 때, TextField가 있으면 TextField를 누르는 경우 키보드가 올라오며 화면에서 오류 메시지가 나온다.

해결

화면 전체(Scaffold의 Body 부분 등)를 SingleChildScrollView로 감싸면 된다.

만약, Scaffold의 속성 중 resizeToAvoidBottomInset = false를 통해 키보드가 화면에 겹칠 경우 오류 메시지가 뜨지 않도록 한 상태라면,
값을 다시 true로 바꿔주거나 해당 라인을 지워야 한다.
false일 경우 SingleChildScrollView 적용 안됨

코드

@override
  Widget build(BuildContext context) {
    return Scaffold(
      // resizeToAvoidBottomInset: false, // true로 설정 혹은 이 라인을 지워야 된다.
      appBar: appBar,
      body: SingleChildScrollView( // 이 부분을 추가!
        child: Column(
            children: [
                        --- 중략 ---
            ],
          ),
        ),
    );
  }