如何在脚手架中调用 ChatMessages() 函数？

Question

所以我想在我的脚手架中调用我的 ChatMessages()，但是我不知道在哪里调用它而不会出错，这是我的 ChatMessages() 函数；

    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(),
          );
  },
);

那么这是我的脚手架；

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

我在哪里可以在脚手架中实现 Chatmessages() 以接收数据？对于上下文，我正在向我的应用程序添加消息传递功能，这似乎是一个非常简单的修复，但我无法弄清楚:')

Answer 1

好的，您需要在构建函数中具有以下布局：

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

那么应该是这样的：

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

在您拥有的 StreamBuilder 中包装 ListView.builder ...

如何在脚手架中调用 ChatMessages() 函数？

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

flutter

flutter-layout