How to use a stack correctly? - firebase

Question

IM trying to use a stack where I displaying a listview and a
This is my code
#override
Widget build(BuildContext context) {
final user = Provider.of<Userforid>(context);
_deviceHeigth = MediaQuery.of(context).size.height;
_deviceWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(this.widget._receivername),
),
body: StreamBuilder<UserData>(
stream: DatbaseService(uid: user.uid).userData,
builder: (context, snapshot) {
return _conversationPageUI();
},
),
);
And then the _conversationPageUI(); is this here
Widget _conversationPageUI() {
return Builder(builder: (BuildContext _context) {
return Stack(
overflow: Overflow.visible,
children: <Widget>[
_messageLisView(),
Align(
alignment: Alignment.bottomCenter,
child: _messageField(_context),
),
],
);
});
}
And then this each widgets are here
Widget _messageLisView() {
final user = Provider.of<Userforid>(context);
return Container(
width: _deviceWidth,
child: StreamBuilder<Conversation>(
stream: DatbaseService.instance
.getConversation(this.widget._convertsationID),
builder: (BuildContext _context, _snapshot) {
if (_listViewController.hasClients) {
_listViewController.animateTo(
_listViewController.position.maxScrollExtent,
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut);
}
var _conversationData = _snapshot.data;
if (_conversationData != null) {
if (_conversationData.messages != null) {
return ListView.builder(
controller: _listViewController,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
itemCount: _conversationData.messages.length,
itemBuilder: (BuildContext _context, int _index) {
var _message = _conversationData.messages[_index];
bool _isOwnMessage = _message.senderID == user.uid;
return _messageListViewChild(_isOwnMessage, _message);
},
);
} else {
return Align(
alignment: Alignment.center,
child: Text("Let's start a Conversation"),
);
}
} else {
return Center(
child: Container(
child: CircularProgressIndicator(),
));
}
},
),
);
}
Widget _messageField(BuildContext _context) {
return Container(
height: _deviceHeigth * 0.07,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(100),
border: Border.all(color: Colors.black, width: 2)),
margin: EdgeInsets.symmetric(
horizontal: _deviceWidth * 0.04, vertical: _deviceHeigth * 0.03),
child: Form(
key: _formKey,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
_messageTextField(),
_sendMessageButton(_context),
_videoMessageButton(),
],
),
),
);
}
The _messageField is just a Textformfield with a hintext and 2 icons . Heres how it looks
So as you can see I cannot see the last listview item correctly and thats my question how can I fix that ?

Answer 1

Padding(
padding: const EdgeInsets.only(bottom:MediaQuery.of(context).size.height * 0.1),
child: ListView.builder(
controller: _listViewController,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
itemCount: _conversationData.messages.length,
itemBuilder: (BuildContext _context, int _index) {
var _message = _conversationData.messages[_index];
bool _isOwnMessage = _message.senderID == user.uid;
return _messageListViewChild(_isOwnMessage, _message);
},
),
)
//OR
sizedBox(
height: MediaQuery.of(context).size.height * 0.80,
child: ListView.builder(
controller: _listViewController,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
itemCount: _conversationData.messages.length,
itemBuilder: (BuildContext _context, int _index) {
var _message = _conversationData.messages[_index];
bool _isOwnMessage = _message.senderID == user.uid;
return _messageListViewChild(_isOwnMessage, _message);
},
),
)

Answer 2

just add padding to the bottom of listview:
Widget _messageLisView() {
final user = Provider.of<Userforid>(context);
return Container(
padding: EdgeInsets.only(bottom: 100),
width: _deviceWidth,

Answer 3

I think passing
fit: StackFit.expand,
to your stack widget will fix your problem.