Flutter: Put textField at bottom of scaffold - flutter

Question

This has been giving me a headache, im just trying to put a Textfield on the bottom of my screen. I have the following code, trying to wrap it in a Positioned:
return Scaffold(
//set a textField to add a reply
appBar: TopAppBar(title: 'bruh'),
body: SingleChildScrollView(
controller: _scrollController,
child: Column(
children: [
FocalWaveTile(
wave: widget.waveTile.wave,
user: profileState.user,
poster: widget.waveTile.poster,
),
ListView.builder(
shrinkWrap: true,
itemCount: waves.length,
itemBuilder: (BuildContext context, int index) {
},
),
//poisition on the bottom
Positioned(
bottom: MediaQuery.of(context).viewInsets.bottom,
child: Container(
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: TextField(
decoration: InputDecoration(
hintText: 'Reply to this wave'),
onChanged: (value) {
if (value.length > 0) {
setState(() {
isTyping = true;
});
} else {
setState(() {
isTyping = false;
});
}
},
),
),
),
],
),
),
)
],
),
));
And it looks like this:
Any idea what im doing wrong? Ive tried a few things like a bottomnavbar and adding a spacer, but neither of these work in the way i would like them too. Thanks!

Answer 1

try this:
return Scaffold(
//set a textField to add a reply
appBar: TopAppBar(title: 'bruh'),
body: Stack(
children: [
SingleChildScrollView(
controller: _scrollController,
child: Column(
children: [
FocalWaveTile(
wave: widget.waveTile.wave,
user: profileState.user,
poster: widget.waveTile.poster,
),
ListView.builder(
shrinkWrap: true,
itemCount: waves.length,
itemBuilder: (BuildContext context, int index) {},
),
//poisition on the bottom
],
),
),
Positioned(
bottom: MediaQuery.of(context).viewInsets.bottom,
child: Container(
height: 50,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: TextField(
decoration:
InputDecoration(hintText: 'Reply to this wave'),
onChanged: (value) {
if (value.length > 0) {
setState(() {
isTyping = true;
});
} else {
setState(() {
isTyping = false;
});
}
},
),
),
),
],
),
),
)
],
),
);

Answer 2

You can use bottomNavigationBar from Scaffold.
Scaffold(
bottomNavigationBar: TextFormField(),

Answer 3

Appreciate everyone's help, but for some reason just replacing the singleChildScrollView with Listview solved it