How do I call my ChatMessages() function in my scaffold? - flutter

Question

So i want to call my ChatMessages() in my scaffold, however I do not know where to call it without getting an error, here is my ChatMessages() function;
Widget chatMessages() {
return StreamBuilder(
stream: messageStream,
builder: (context, snapshot) {
return snapshot.hasData
? ListView.builder(
itemCount: snapshot.data.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot ds = snapshot.data.docs[index];
return Text(ds["message"]);
})
: Center(
child: CircularProgressIndicator(),
);
},
);
then here is my scaffold;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.chatWithUsername),
),
body: Column(
children: [
Spacer(),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
),
child: SafeArea(
child: Row(
children: [
Icon(Icons.attach_file),
SizedBox(
width: 20,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20 * 0.75),
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.05),
borderRadius: BorderRadius.circular(40)),
child: Row(
children: [
SizedBox(
width: 20 / 4,
),
Expanded(
child: TextField(
controller: TextEditingController(),
decoration: InputDecoration(
hintText: "Send a message",
border: InputBorder.none),
)),
Icon(
Icons.send,
color: Theme.of(context)
.textTheme
.bodyText1
.color
.withOpacity(0.64),
),
],
Where can I implement the Chatmessages() within the scaffold to receive the data? For context I am adding messaging functionality to my app and this seems like a very easy fix however I cant figure it out :')

Answer 1

Ok, you'll need to have the following layout in your build function:
#override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(),
body: Column(
children: [
Expanded(
child: StreamBuilder<String>(),
),
MessageEntryWidget(),
],
),
),
),
);
}
should be something like this then:
#override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(
title: Text('chatWithUsername'),
),
body: Column(
children: [
Expanded(
child: StreamBuilder<String>(
stream: messageStream,
builder: (context, snapshot) {
return ListView.builder(
itemCount: itemCount,
itemBuilder: (context, index) {
//DocumentSnapshot ds = snapshot.data.docs[index];
return Text('message');
},
);
}),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
child: Row(
children: [
Icon(Icons.attach_file),
SizedBox(
width: 20,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20 * 0.75),
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.05),
borderRadius: BorderRadius.circular(40)),
child: Row(
children: [
SizedBox(
width: 20 / 4,
),
Expanded(
child: TextField(
controller: TextEditingController(),
decoration: InputDecoration(
hintText: 'Send a message',
border: InputBorder.none),
)),
Icon(
Icons.send,
color: Theme.of(context)
.textTheme
.bodyText1
?.color
?.withOpacity(0.64) ??
Colors.red,
)
],
),
),
)
],
),
),
],
),
),
),
);
}
Wrap the ListView.builder in the StreamBuilder you have ...