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

Issue

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 :')

Solution

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 ...

Answered By - kazume