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

    2022. 2. 23.

    by. 안녕진

    상황

    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: [
                            --- 중략 ---
                ],
              ),
            ),
        );
      }

    '개발 > Flutter' 카테고리의 다른 글

    Flutter Navigator 홈 화면으로 가는 방법  (0) 2022.02.16

    댓글