[flutter]resizeToAvoidBottomInset: true 로 버튼 안눌림 해결

오늘의 주제

플러터로 채팅방을 구현했는데, 에뮬레이터로 테스트할때는 잘눌리던 전송버튼이, 실제 핸드폰으로 테스트해봤을때 안눌리는 현상이 발생했었다.
그리고 이를 해결하면서 배운 resizeToAvoidBottomInset 속성의 기능을 정리하려고 한다.

에뮬레이터로 메시지를 전송할때는 잘 눌리던 메시지 전송 화살표버튼이,
실제 핸드폰에 어플을 깔아 테스트해볼때는, 전혀 작동하지 않았다

왜이러지 ??? 당황했는데
이전에 유니티로 게임어플을 만들어보면서도 발생했던 안눌림(?) 문제가 생각나서,
기억을 더듬더듬 ..
그때도 아마 화면 비율이 안맞아서였나, 여러 ui가 겹치면서였나 버튼이 안눌렸었다.

그래서 바로 ui 겹침 문제 해결방법 서치 고고

해결방법중 하나는 resizeToAvoidBottomInset:true 속성을 추가해주는 것이었는데,
문제가 되는 부분에 추가만 해주면 해결된다 !

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: const Text("문의하기"),
      ),
      body: Column(
        children: [
          Expanded(
              child: ListView.builder(
                  itemCount: messages.length,
                  itemBuilder: (context, index) {
                    final message = messages[index];
                    return Column(
                      crossAxisAlignment: message["isUser"]
                      ? CrossAxisAlignment.end : CrossAxisAlignment.start,
                      children: [
                        Container(
                          padding: EdgeInsets.all(10),
                          margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                          decoration: BoxDecoration(
                            color: message["isUser"]? Colors.blue : Colors.grey,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: Text(
                            message["text"],
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        if(message.containsKey("buttons"))
                          Wrap(
                            spacing: 8,
                            children: List<Widget>.generate(
                              message["buttons"].length,
                                (btnIndex) => ElevatedButton(
                                    onPressed: ()=> handleUserSelection(message["buttons"][btnIndex]),
                                    child: Text(message["buttons"][btnIndex]),
                                ),
                            ),
                          ),
                      ],
                    );
                  },
              ),
          ),
          if(isChatInputVisible)
            ChatInputField(onSend: handleMessageSend),
        ],
      ),
    );
  }

예를들어 나는 Scaffold 맨 위쪽에 resizeToAvoidBottomInset:true 속성을 추가해줬는데, 바로 테스트 결과 정상적으로 버튼이 눌렸다.

resizeToAvoidBottomInset:true는 무엇인가?

이는 입력창(textField, TextFormField) 등이 화면 하단에 고정되어있는 구조일 때,
입력창을 누르면 키보드가 올라오고, 이 키보드로 인해 입력창이 가려지지 않도록 자동으로 재배치하기 위해 필요한 기능이다.

즉, 키보드가 활성화되었을때, Scaffold의 body영역을 자동으로 줄이거나 재배치하여,
하단에 기존에 있던 UI (입력창, 버튼 등) 가 키보드에 가려서 안눌리는 일이 없도록 해주는 기능이라고 할 수 있다.