Flutter: How to make chat page bottom text bar

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.