TextField 사용 시 Overflow 발생 해결 방안

Overflow

Flutter에서 키보드 기능을 사용시 자주 볼 수 있는 Overflow이다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: SizedBox(
              child: Container(
                color: Colors.green[100],
                child: Center(
                  child: Column(
                    children: [
                      const SizedBox(height: 40),

                      // 첫 번째 textbox
                      TextBox(
                        text: enteredText[0].split(''),
                        answer: answerText,
                      ),
                      const SizedBox(height: 5),

                      //두 번째 textbox
                      TextBox(
                        text: enteredText[1].split(''),
                        answer: answerText,
                      ),
                      const SizedBox(height: 5),

						생략
                    ],
                  ),
                ),
              ),
            ),
          ),
          _buildTextInput(),
        ],
      ),
    );
  }

  //키보드
  Widget _buildTextInput() {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Row(
        children: [
          Expanded(
            child: MyTextField(
              controller: _textController,
              hintText: 'Enter your answer',
              obscureText: false,
            ),
          ),
          IconButton(
            onPressed: sendText,
            icon: const Icon(
              Icons.send,
              size: 40,
            ),
          ),
        ],
      ),
    );
  }

다음과 같은 코드에서 TextField와 이외의 기능은 정상적으로 작동하나,

키보드가 올라오면서 Overflow가 발생한다.

 

Overflow가 발생한 모습

 

첫 번째 방법 (resizeToAvoidBottomInset)

return Scaffold(
	  resizeToAvoidBottomInset = false;
      
      코드동일...

Scaffold 안에 resizeToAvoidBottomInset = false 를 추가하면 된다.

 

그러나 키보드에 입력한 텍스트를 표시해주는 창이 키보드와 같이 안 올라오게 된다.

 

두 번째 방법 (ListView)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[100],
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Center(
                  child: Column(
                    children: [
                      const SizedBox(height: 40),

                      // 첫 번째 textbox
                      TextBox(
                        text: enteredText[0].split(''),
                        answer: answerText,
                      ),
                      const SizedBox(height: 5),

                      //두 번째 textbox
                      TextBox(
                        text: enteredText[1].split(''),
                        answer: answerText,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          _buildTextInput(),
        ],
      ),
    );
  }

ListView를 이용하면 된다.

이때 ListView에 오류가 안 뜨도록 적절한 조치를 해주세요.

 

ex) 맨 위에 있는 코드에서 Expanded 바로 밑에 있는 SizedBox를 ListView로 감싸면 오류가 발생합니다.