Flutter: How to make chat page bottom text bar - flutter

Question

I am trying to make a chat page on flutter that looks like this: top bar + bottom textField and send button. I have been able to make both the top appbar and the textfield with the send button, but I have not been able to position the textfield at the bottom of the page successfully. I have tried things like Align and Expand, footer, BottomNavigationBar.
The current version of the code I have pasted only shows the top Appbar. If I take out the child Row and the send button, I have a textfield at the bottom of the page. For some reason, as soon as I add the child Row in order to be able to add the send button, the entire textfield does not show up on the screen. I would appreciate any help.
Note: Since I am trying to make a chat screen, I want the middle section to be scrollable (while the top and bottom remain), where I can later add the chat bubbles.
Screenshot of code because of the bad editing of code snippet
Continuation of code snippet
"""
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorConstant.whiteA700,
// Top bar
appBar: AppBar(
backgroundColor: ColorConstant.deepOrange300,
title: Text("Match's Name",style: AppStyle.textstyleinterregular15.copyWith(
fontSize: getFontSize(15))),
),
body: Column(
children: [
Expanded(child: SingleChildScrollView(
child: Column(
children: [
// Bubbles
],
),
),
),
Container(
height: 45,
width: double.infinity,
color: ColorConstant.whiteA700,
child: Row(children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "Message...",
hintStyle: TextStyle(color: ColorConstant.bluegray100),
border: OutlineInputBorder(
borderSide: BorderSide(color: ColorConstant.bluegray100)
),
)
),
SizedBox(width: 15,),
// Send Button
FloatingActionButton(
onPressed: (){},
child: Icon(Icons.send,color: ColorConstant.whiteA700,size: 18,),
backgroundColor: ColorConstant.lightBlueA100,
elevation: 0,
),
]),
);
],
),
);
"""

Answer 1

Try this one...
bottomNavigationBar: Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
height: 45,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
children: [
Expanded(
child: const TextField(
decoration: InputDecoration(
hintText: "Message...",
hintStyle: TextStyle(color: Colors.blue),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue)),
),
),
),
SizedBox(
width: 15,
),
// Send Button
MaterialButton(
color: Colors.red,
onPressed: () {},
child: Icon(
Icons.send,
color: Colors.white,
size: 18,
),
// backgroundColor: ColorConstant.lightBlueA100,
elevation: 0,
),
],
),
),
),

Answer 2

Wrap TextField with Expanded widget it'll work for you.