Search code examples
flutterdartflutter-layout

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

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
════════════════════════════════════════════════════════════════════════════════

enter image description here

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:

enter image description here

What I really want?:

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

enter image description here

Solution

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