How to make Container inside ClipRRect resize to Child Text Size

Question

So, I have a Widget that builds a message (imagine a typical WhatsApp message dialog, or what one can call a message bubble).

Widget _buildMessage(String text, String time) {
return Padding(
  padding: EdgeInsets.symmetric(vertical: 7.5),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          SizedBox(width: 10),
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20),
                bottomLeft: Radius.circular(20)
            ),
            child: Container(
              color: Colors.lightBlue,
              padding: EdgeInsets.all(17),
              width: MediaQuery.of(context).size.width * 0.3,
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.white,
                  height: 1.2,
                ),
              ),
            ),
          ),
        ],
      ),
      Padding(
        padding: EdgeInsets.only(left: 20),
        child: Text(
          time,
          style: TextStyle(
            color: Colors.grey,
            height: 1.5,
            fontSize: 8,
          ),
        ),
      ),
    ],
  ),
);

}

To this, I feed the text using a simple call:

_buildMessage("Yep, sure!","20 minutes ago",)

Now, the problem here is that the child Container I have right now has a fixed width being determined by:

width: MediaQuery.of(context).size.width * 0.3,

This is problematic, because it does not essentially wrap around the text. Rather, for small texts such as hi or hello, the chat bubble is excessively wide. It does work normally for longer bits of text, but one cannot assume that it will always be the case.

Therefore, could you please advice me regarding how to best achieve this media-query so that the width has a max value set at width: MediaQuery.of(context).size.width * 0.3,, but also falls down to wrap the text when it is smaller?

Checkout this link : https://stackoverflow.com/questions/53910087/wrap-text-in-container-without-using-a-fixed-width-in-flutter — Darshan, Mar 19 '19 at 05:37
I understood that I have to use a Flexible Container. But I am not being able to replicate his solution with my code. I get the `too many positional arguments` error. Any pointers would be amazing. — Esh, Apr 04 '19 at 10:52

score 1 · Accepted Answer · answered Apr 04 '19 at 18:04

So, this was a fairly basic problem that I had not figured out for a long time. You see, what this actually needed is a max and min width. When I tried to do something like that, I was searching with the words min-width and container, and that somehow didn't bring the answers up anywhere. In reality, Containers do not have any minWidth defined either. It must be written inside a constraint instead.

So a solution to this is to simply use a constraint (which performs better than a flexible container as advised in #53910087 in terms of visual appeasement) on the container itself.

constraints: BoxConstraints(
                  maxWidth: 250.0,
                  minWidth: 30.0,
              ),

So the container would become:

child: Container(
              color: Colors.lightBlue,
              padding: EdgeInsets.all(17),
              constraints: BoxConstraints(
                  maxWidth: 250.0,
                  minWidth: 30.0,
              ),
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.white,
                  height: 1.2,
                ),
              ),
            ),

And the result then looks like this:

How to make Container inside ClipRRect resize to Child Text Size

1 Answers1