실제 폰에서 테스트 시 리뷰 작성 버튼 위치

확인해보니 그렇군요 시뮬레이터로 하다보니 가상 키보드가 올라오지 않아서 확인이 안됐었군요.

알려주셔서 감사합니다. 해당 문제는 여러가지 방법으로 문제를 해결 할 수 있겠지만 그 중 가장 간단한 방법은

하단 리뷰 TextField가 아닌 다른 영역을 더치시 키보드가 닫히도록 처리 하는 방법이 있습니다.

그것을 위해서는 body 영역의 Column 위젯을 GestureDetector로 감싸주고 onTap시 FocusScope를 onfocus 시켜주는 것입니다. 소스코드는 다음과 같습니다.

GestureDetector(
    onTap: () => FocusScope.of(context).unfocus(),
    behavior: HitTestBehavior.translucent,
    child: Column(
       children: [
         BookReviewHeaderWidget(
            naverBookInfo: naverBookInfo,
            reviewCountDisplayWidget: 
     // 이하 소스 동일

이렇게 작성을 하게 되면 다른 영역 터치시 키보드가 다시 내려가는 것을 확인 할 수 있습니다.

그렇게 하면 발생되는 문제는 이상하게 수정한 내용이 다시 초기화 되는 문제가 발생되는 것을 알 수 있습니다.

그것은 _ReviewBox 위젯에 didUpdateWidget을 initReview 값으로 초기화 해주고 있기 때문입니다.

이 부분은 최초 위젯이 랜더링 될때만 initreview를 받고 그 이후에는 업데이트 해줄 필요가 없는 부분입니다.

그래서 최초 위젯 랜더링 시에는 editingController.text 값이 빈 상태이기 때문에 다음과 같은 조건을 추가해줘야 합니다.

  @override
  void didUpdateWidget(covariant _ReviewBox oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (editingController.text.isEmpty) {
      editingController.text = widget.initReview ?? '';
    }
  }

이렇게 수정해주면 문제를 해결 할 수 있습니다.

또 다른 방법은 외부 라이브러리를 이용한 방법입니다.

keyboard_attachable

이 라이브러리를 사용하면 키보드 상단에 고정을 시키는 방식으로 채팅 화면을 생각하시면 쉬울 것입니다.

단 이렇게 하면 화면 디자인을 수정해 줘야 하는 부분도 있고 소스코드를 많이 수정해야 하는 부분이라

현 강의에서는 위 첫번째 방식으로 문제를 해결하는 것을 추천드리겠습니다.

인프런 커뮤니티 질문&답변