Why does my widget get squished when the keyboard appears?

Question

The chatScreen holds the receivedChats (top) and the msgInput (bottom) widgets. For some reason, the words "Write message..." go outside of their text input widget and I'm not sure why.

chatScreen:

@override
  Widget build(BuildContext context) {
    final groupIDPath = 'groupChats/path'; 
    return Scaffold(
      appBar: AppBar(
        title: Text('Group Chat Screen'),
        backgroundColor: Color.fromRGBO(102, 204, 125, 1.0),
        elevation: 0.0,
      ),
      body: Column( 
        children: [
          Expanded(
            flex: 8,
            child: Row(
              children: [
                Expanded(
                  child: ReceivedChats(groupIDPath: groupIDPath),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Row(
              children: [
                Expanded(
                  child: MsgInput(groupIDPath: groupIDPath),
                )
              ],
            ),
          )
        ],
      )
    );
  }

receivedChats:

@override
  Widget build(BuildContext context) {
    final messageDao = MessageDao(groupIDPath: widget.groupIDPath);
    var msg;
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: data?.length ?? 0,
          itemBuilder: (context, index) {
            data?.forEach((key, value) {
              msg = Message.fromJson(value);
              dataList?.add(msg);
            });
            if (dataList?[index] == null) { 
              return Text('');
            } else {
              return messageDao.messageWidget(dataList?[index].type, dataList?[index].uid, dataList?[index].text);
            }
          }
        ),
      )
    );
  }

msgInput:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 3,
            child: Row(
              children: [
                Expanded(
                    child: Container(color: Colors.blue,)
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  flex: 10,
                    child: TextField(
                        controller: messageController,
                        decoration: InputDecoration(
                          hintText: "Write message...",
                        )
                    )
                ),
                Expanded(
                  flex: 3,
                    child: Container(color: Colors.green,)
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

Answer 1

Wrap your Scaffold body with SingleChildScrollView, i think its better to use in chatScreen:

return Scaffold(
    body: SingleChildScrollView(
        child: ...
    ),
);

or give resizeToAvoidBottomPadding: false to Scaffold to avoid this problem

read about SingleChildScrollView