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

Question

I am working a messaging app based on firebase. I am a having problem in the home page. I created the home page to show the last message, the user name, and the profile pic of the user who send the message. But when I am getting back from the chatscreen only the last message is updating. And the last message did not showing the correct user who send the message. But after hot reload it is showing correctly. And the ListView builder did not scrolling. It is showing a error "BOTTOM OVERFLOWED BY 98 PIXEL". How can I fixed those problems?

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

ChatRoomList Tile:

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

Full home page code: https://github.com/Monzim/messengerClone/blob/main/lib/views/home.dart

Answer 1

I just updated my answer you can put this code into your Home class

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