Flutter Text inside Container doesn't expand to second line [Chat Bubble]

Question

I am trying to make a messenger app but couldn't find solution for this,

Issue: The container Widget doesn't expand for long text inside Text Widget

-Container()

   |
    --> Text()

What I Tried:

I Tried Flexible Widget inside container over the Text Widget but that doesn't work. Flex doesn't work inside Container.

**Error : **

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 38 pixels on the right.
The relevant error-causing widget was
Row
lib\views\chatScreen.dart:201
════════════════════════════════════════════════════════════════════════════════

My Code :

class MessageBubble extends StatelessWidget {
  bool isMine;
  String message;
  MessageBubble(this.isMine, this.message);

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment:
            isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(7),
            decoration: BoxDecoration(
              color: isMine ? Colors.blue : Colors.red,
            ),
            child: 
              child: Text(
                message,
                textWidthBasis: TextWidthBasis.parent,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 16.0),
              ),
            ), 
        ]);
  }
}

Code Tried With Flexible: (Doesn't Work)

class MessageBubble extends StatelessWidget {
  bool isMine;
  String message;
  MessageBubble(this.isMine, this.message);

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment:
            isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(7),
            decoration: BoxDecoration(
              color: isMine ? Colors.blue : Colors.red,
            ),
            child: Flexible(
              child: Text(
                message,
                textWidthBasis: TextWidthBasis.parent,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 16.0),
              ),
            ),
          ),
        ]);
  }
}

Result with Flexible or Expanded:

What I really want?:

The ChatBubble should not be equal to size of the screen. Like the Image Below.

Add your Widget inside Expanded or Flexible refer my answer [here](https://stackoverflow.com/a/68559619/13997210) or [here](https://stackoverflow.com/a/68463935/13997210) hope its help to you — Ravindra S. Patil, Sep 11 '21 at 10:32
Flexible and Expanded Both gives this Error : ``Incorrect use of ParentDataWidget`` — Sayed Muhammad Idrees, Sep 11 '21 at 10:40
Dear @RavindraS.Patil I want to use to over Text() Which is Inside Container(). — Sayed Muhammad Idrees, Sep 11 '21 at 10:44

score 4 · Accepted Answer · answered Sep 11 '21 at 16:39

Well you need to specify the min width to the container and you are all set. Test this:

return Row(
        mainAxisAlignment:
            isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          IntrinsicWidth(
              child: Container(
            constraints: BoxConstraints(
                maxWidth: MediaQuery.of(context).size.width / 1.3),
            margin: EdgeInsets.symmetric(vertical: 4, horizontal: 14),
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              color: isMine ? Colors.blue : Colors.red,
              borderRadius: BorderRadius.only(
                topLeft: isMine ? Radius.circular(20) : Radius.circular(0),
                bottomLeft: isMine ? Radius.circular(20) : Radius.circular(10),
                bottomRight: isMine ? Radius.circular(10) : Radius.circular(20),
                topRight: isMine ? Radius.circular(0) : Radius.circular(20),
              ),
            ),
            child: Text(
              message,
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                  fontSize: 16),
            ),
          )),
        ]);

Thank you Mam, The Max width to the container did it – Sayed Muhammad Idrees Sep 11 '21 at 16:54 — Sayed Muhammad Idrees, Sep 11 '21 at 16:54

score 0 · Answer 2 · edited Sep 11 '21 at 10:47

0

Let me save you time, you can use Flutter Chat Bubble, Get it here on pub

The library got you covered for text wrap and the rest

Below is a sample

edited Sep 11 '21 at 10:47

Dharman

30,962
25
85
135

answered Sep 11 '21 at 10:42

adamu_fura

773
1
6
14

score 0 · Answer 3 · answered Sep 11 '21 at 11:04

Try below answer hope its help to you I have try your code and I think your problem is solved, Just Wrap your Container inside Flexible or Expanded Widget

  Expanded(
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 4, horizontal: 14),
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0),
              bottomLeft: Radius.circular(10),
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(20),
            ),
          ),
          child: Text(
              "hfduasudfufabsydsxfssahfduasudfufabsydsxfssahfduasudfufabsydsxfssahfduasudfufabsydsxfssahfduasudfufabsydsxfssa"),
        ),
      ),

Result of your Screen ->

your solution take full screen width of the device. I have edited the question please check the image of what result i really want. — Sayed Muhammad Idrees, Sep 11 '21 at 16:44
Try to use In **IntrinsicWidth()** widget refer documentation [here](https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html) and use container width is MediaQuery [refer here](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html) — Ravindra S. Patil, Sep 12 '21 at 03:43

score -1 · Answer 4 · edited Oct 30 '22 at 01:39

Row(
      mainAxisAlignment:
          sendByMe ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(24),
              bottomLeft: sendByMe ? Radius.circular(0) : Radius.circular(24),
              topRight: Radius.circular(24),
              bottomRight: sendByMe ? Radius.circular(24) : Radius.circular(0),
            ),
            color: sendByMe ? Colors.blue : Colors.grey,
          ),
          padding: EdgeInsets.all(18),
          child: Container(
              constraints: BoxConstraints(
                maxWidth: 60.w,
              ),
              child: Text(
                message,
              )),
        )
      ],
    );

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 29 '22 at 10:58
Yeah this could use more explanation, but the container constraints helped me a lot - so thanks :-) — Mladen Mihajlovic, May 15 '23 at 13:15

Flutter Text inside Container doesn't expand to second line [Chat Bubble]

4 Answers4