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

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,
          ),
        ]),
      );
    ],
  ),
);

"""

CodePudding user response：

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
              FloatingActionButton(
                onPressed: () {},
                child: Icon(
                  Icons.send,
                  color: Colors.green,
                  size: 18,
                ),
                // backgroundColor: ColorConstant.lightBlueA100,
                elevation: 0,
              ),
            ],
          ),
        ),
      ),

CodePudding user response：

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