Text in a container in a row overflows. Expanded doesn't work-CodePudding

There are a lot of similar questions, but none of them works in my case. I think it may be connected to my builder widget, but it is just a guess based on that I tried every combination of Expanded, Columns and Flexible I could think of and my Text widget still overflows. I'd my Text widget to wrap for as many lines as needed. Can you have a look please?

Row messageBubble(String text, bool isMine) {
  return Row(
    mainAxisAlignment: isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.3),
            borderRadius: const BorderRadius.all(
              Radius.circular(20),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Text(
              text,
              style: kSmallText,
            ),
          ),
        ),
      ),
    ],
  );
}

And more of the code that wraps my message bubble.

SingleChildScrollView(
                  child: StreamBuilder<QuerySnapshot>(
                      stream: FirebaseFirestore.instance
                          .collection("message${item.id}")
                          .orderBy("messageCount", descending: false)
                          .snapshots(),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return ListView.builder(
                              physics: const NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              itemCount: snapshot.data!.docs.length,
                              itemBuilder: (context, index) {
                                DocumentSnapshot doc =
                                    snapshot.data!.docs[index];
                                lastMessage = doc["messageCount"];
                                return messageBubble(
                                    doc["message"],
                                    Provider.of<UserProvider>(context,
                                                    listen: false)
                                                .userEmail ==
                                            doc["user"]
                                        ? true
                                        : false);
                              });
                        } else {
                          return const Center(
                              child: CircularProgressIndicator());
                        }
                      }),
                ),

CodePudding user response：

try list view also did you try it on many devices or just the emulator?

CodePudding user response：

Wrap the top level Padding widget with Flexible widget.

Widget messageBubble(String text, bool isMine) {
  return Row(
    mainAxisAlignment: isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
    children: <Widget>[
      Flexible(
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.3),
              borderRadius: const BorderRadius.all(
                Radius.circular(20),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Text(
                text,
                // softWrap: true,
              ),
            ),
          ),
        ),
      ),
    ],
  );
}