How to stop two widgets within stack from overlapping each other?

Question

I have a chat messenger screen which looks like the given screenshot . As you can see , bottom message is hidden behind the text input area . The messages are listview , built using streambuilder . I want the messages above the text input area . https://i.sstatic.net/A82X2.png

    return Scaffold(
      appBar: AppBarMain(context),
      body: Container(
        child: Stack(
          children: [
            chatMessageList(),
            Positioned(
              bottom: 0,
              child: Container(
                color: Color(0x54ffffff),
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 14, vertical: 20),
                  width: MediaQuery.of(context).size.width,
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                          controller: messageController,
                          style: TextStyle(color: Colors.white),
                          decoration: InputDecoration(
                              hintText: ' Message!...',
                              hintStyle: TextStyle(color: Colors.white54),
                              border: InputBorder.none),
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          sendMessage();
                        },
                        child: Container(
                            padding: EdgeInsets.all(9),
                            height: 40,
                            width: 40,
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    Color(0x36FFFFFF),
                                    Color(0xFFFFFFFF)
                                  ],
                                ),
                                borderRadius: BorderRadius.circular(40)),
                            child: Image.asset('assets/images/send.png')),
                      )
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
        


  

Answer 1

Your structure should be something like

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: chatMessageList(),
    ),
    MessageFieldWidget(),
  ],
)

This will ensure that your chatMessageList will take up all of the space available in the screen and your Message Field will take up only the space that it needs. You don't need to use Positioned or Padding.