Flutter :: 키보드 위에 버튼 고정시키는 방법 (Alignment.bottomCenter)

https://youtube.com/shorts/u_hzF982xbI?feature=share 

배경

초중고 학생들을위한 체력측정 앱 개발 중에, 키보드 위에 확인 버튼위젯을 고정할 일이 생겼는데 이슈들이 발생해서 정리하고자 한다.

 

요구사항

1. 키보드 바로 위에 '확인' 버튼이 있어야 함

2. 키보드에 입력 데이터가 가려지면 안됨

3. 버튼을 선택할 때 키보드가 없어져야 함

 

해결방법

double bottomViewInsets = MediaQuery.of(context).viewInsets.bottom;
bool keyboardOn = bottomViewInsets != 0;	// 키보드 존재 여부 판단

키보드가 올라가면 키보드의 높이만큼 bottomViewInsets이 증가하는 점을 이용해 키보드가 올라왔는지 파악할 수 있다.

 

  keyboardOn
      ? Align(
          alignment: Alignment.bottomCenter,
          child: InkWell(
            onTap: () async {
              int index = controller.registerStateIndex.value;
              FocusNode focusNode = controller.focusNodeList[index];
              if (focusNode.hasFocus) {
                controller.nextStep();
                Future.delayed(const Duration(milliseconds: 100), () {
                  int index = controller.registerStateIndex.value;
                  FocusNode focusNode = controller.focusNodeList[index];
                  FocusScope.of(context).requestFocus(focusNode);
                });
              } else {
                FocusScope.of(context).unfocus();
              }
            },
            child: Container(
              width: 375.w,
              height: 56.h,
              decoration: const BoxDecoration(
                color: kPrimaryColor,
              ),
              child: Center(
                child: Text(
                  '확인',
                  style: kNextButton1.copyWith(color: kWhiteColor),
                ),
              ),
            ),
          ),
        )
      : const SizedBox.shrink(),

키보드가 올라왔을 때만 "확인" 버튼을 보여주면 되므로, keyboardOn 변수로 분기처리를 해준다.

여기서 다음 입력할 필드가 텍스트임에도 불구하고 키보드가 내려가는 문제가 있었는데,

원인은 controller.nextStep(); 시 포커싱할 포커스 노드의 index의 값이 1이 증가하는데, UI가 rebuild 되므로 아래코드의 index에 반영되기 까지 시간이 걸려서 Delay를 100ms 주어서 해결했다.

 

Align(
  alignment: Alignment.bottomCenter,
  child:
)

Alignment.bottomCenter 를 사용하면 맨 아래에 위젯이 배치되므로, CustomScrollView 바깥에 위젯을 배치했다. 

Next To do

학교정보 검색, 선택 화면 개발

이메일 인증, 비밀번호 입력 화면 개발