firebase - Flutter 页面刷新问题 | ListView 显示错误“BOTTOM OVERFLOWED BY 98 PIXEL”

Question

我正在开发一个基于 firebase 的消息传递应用程序。我的主页有问题。我创建了主页以显示最后一条消息、用户名和发送消息的用户的个人资料图片。但是当我从聊天屏幕回来时，只有最后一条消息正在更新。最后一条消息没有显示发送消息的正确用户。但是热重载后它显示正确。并且 ListView 构建器没有滚动。它显示错误“BOTTOM OVERFLOWED BY 98 PIXEL”。我该如何解决这些问题？

  Widget chatRoomsList() {
return StreamBuilder(
  stream: chatRoomsStream,
  builder: (context, snapshot) {
    return snapshot.hasData
        ? ListView.builder(
            itemCount: snapshot.data.docs.length,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              DocumentSnapshot ds = snapshot.data.docs[index];
              return ChatRoomListTile(ds.id, ds["lastMessage"], myUserName);
            })
        : Center(child: CircularProgressIndicator());
  },
);
}

聊天室列表磁贴：

class _ChatRoomListTileState extends State<ChatRoomListTile> {
  String profilePicUrl = "", name = "", username = "";

  getThisUserInfo() async {
    username =
        widget.chatRoomId.replaceAll(widget.myUserName, "").replaceAll("_", "");
    QuerySnapshot querySnapshot = await DatabaseMethods().getUserInfo(username);
    print("something the data we are getting ${querySnapshot.docs[0].id}");
    name = "${querySnapshot.docs[0]["name"]}";
    profilePicUrl = querySnapshot.docs[0]["imgUrl"];
    setState(() {});
  }

  @override
  void initState() {
    getThisUserInfo();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        before going to charRoom
         Navigator.push(
             context,
            MaterialPageRoute(
               builder: (context) => ChatScreen(
                 username,
                 name,
               ),
            ));
      },

      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(30),
            child: Image.network(
              profilePicUrl,
              height: 40,
              width: 40,
            ),
          ),
          SizedBox(width: 12),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(name,
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                  )),
              SizedBox(height: 3),

              Container(
                width: 200,
                child: Text(
                  widget.lastMessage,
                  style: TextStyle(
                    fontSize: 16,
                    color: HexColor("#E6F4F7"),
                  ),
                  overflow: TextOverflow.visible,
                  softWrap: false,
                ),
              ),
              SizedBox(height: 30),
            ],
          ),
        ],
      ),
    );
  }
}

完整主页代码：https ://github.com/Monzim/messengerClone/blob/main/lib/views/home.dart

标签： firebasefluttergoogle-cloud-firestore

Answer 1

我刚刚更新了我的答案，您可以将此代码放入您的Home class

  Column(
    children: [
      Row(
        children: [
           ...// Your Child
        ],
      ),
      isSearching ? Expanded(child: searchUserList()) : Expanded(child: chatRoomsList(),
    ],
  ),