[Flutter] textformfield 클릭시 화면이 리스트를 가리는 현상

흔히 말하는 키보드영역때문에 화면이 가리는 것이다.

가려진 화면만큼 이동하는게 아니라 키보드가 고정처럼 붙어버려서

입력창을 클릭하면 화면이 가려져서 아래와 같이 해결했다.

 

 

우선 입력하는 위젯을 크게 scrollview로 감싸줬다.

SingleChildScrollView(
                      child: NewMessages2(
                        roomId: widget.chatResponse.id.toString(),
                        userId: userProvider.userInfo.id.toString(),
                        userName: userProvider.userInfo.name,
                      ),
                    )

 

사실 이렇게 해도 되지만 해당 위젯의 build 최상위에

아래와 같은 부분도 추가해줬다. 해당 부분을 추가해야지 키보드가 올라왔을때 화면을 밀어준다.

@override
  Widget build(BuildContext context) {
    mediaQueryData = MediaQuery.of(context);
    return SafeArea(
        child: GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          child: Scaffold(
              backgroundColor: appTheme.gray5002,
              resizeToAvoidBottomInset: true,

 

unfocus는 텍스트 폼이 포커스되었을때 밖부분을 클릭하면 포커스를 해제하도록 하는 메소드이다.

textformfield를 쓰면 거의 필수이다.(이게 좀 번거롭다)

 

 

무튼 키보드 관련 화면 가림 이슈가 있으면

SingleScrollview + Scaffold에 resize설정을 추가해주면된다.

추가로 bottomnavigationbar에 대한 기본 설정에 위젯을 쓰게 되면 이 옵션이든 뭐든 안먹는데

이건 아직 플러터 이슈라서 고치기 전인것같다.

그래서 그냥 Column으로 위젯들을 정의하고 사용해야한다