Limit max width of Container in Flutter

Question

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

This is build method of my widget and It renders this UI depending on what I pass as msg paramter

Loading text
Some very long text

Now the issue I am facing is that I am not able to wrap the text inside this container/blue box without setting it's width but If I set width of container/blue box then it will always stay that wide no matter how short the text is.

Now is there a way to set maxWidth (like let's say 500) of container/blue box? So that the blue box will become as wide as required for small text like "Loading" and for long text it will expand till it reaches width of 500 units and then will wrap the text ?

Required output for long text:

For small text like loading I dont want any change in UI but for long text I want it to look like this.

score 206 · Answer 1 · edited Dec 23 '22 at 09:08

You can add a constraint to the Container Widget with the preferred maxWidth like this:

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

score 47 · Answer 2 · edited Sep 12 '21 at 22:19

47

Use ConstrainedBox with BoxConstraints maxWidth, wrapped in a Flexible() widget. The Flexible widget allows for the box to resize for smaller screens as well.

Flexible(
  child: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 150),
    child: Container(
      color : Colors.blue,
      child: Text('Your Text here'),
    ),
  ),
),

edited Sep 12 '21 at 22:19

Matthew Rideout

7,330
2
42
61

answered Apr 13 '20 at 07:09

Dinesh

468
5
5

2

I just tried it, and the problem is that it overflows the screen in case the screen is not that large. – Roc Boronat Sep 14 '20 at 12:51
3

Fixed! Just put this ConstrainerBox inside a Flexible :·) – Roc Boronat Sep 14 '20 at 12:53
in some cases e.g. when the `ConstrainedBox` is inside a row with multiple expanded elements, the `Flexible` solution wont work. what I did is doing `MediaQuery.of(context).size.width < 150` check and return the widget without a `ConstrainedBox` if so – Adnan Aug 11 '23 at 18:01

score 14 · Answer 3 · answered Dec 13 '20 at 08:21

This required to be inside Row or Column Widget

1. Row

  Row(
      children: [
        Container(
            constraints: BoxConstraints(maxWidth: 300),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0)),
            child: Text("Long Text....")
        ),
      ],
    );

2. Column

Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            constraints: BoxConstraints(maxWidth: 300),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0)),
            child: Text("Long Text....")
        ),
      ],
    );

Here in both examples, it's working because Column and Row allow it's children to expand to it's given constraint/size.

Note: If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored.

score 6 · Answer 4 · answered Sep 29 '20 at 20:57

Here's a simple method I use for long texts:

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 200),
  child: Container(
    child: Text(
      'Long string of text',
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    ),
  ),
)

Note the maxLines attribute which might be helpful should you wish to show just a single line of text.

score 5 · Answer 5 · answered May 26 '21 at 11:30

5

For me at least putting the Constrained box in IntrinsicWidth has solved issue.

IntrinsicWidth(
  child: Container(
    constraints: BoxConstraints(maxWidth: 200),
    child: Row(
      children: [
       
      ],
    ),
  ),
);

answered May 26 '21 at 11:30

Mohan Sai Manthri

2,808
1
11
26

Is recommend by Flutter, avoid use IntrinsicWidth and IntrinsicHeight when posible, because is too expensive to build – Matias de Andrea May 04 '22 at 12:02
Great suggestion. It allows for aligning components without making the container fill max size – Granson May 17 '23 at 12:33

score 4 · Answer 6 · answered Dec 11 '20 at 10:02

Use Constraints property in Container widget.

use maxWidth & minWidth value to achieve the requirement.

 Container(
      constraints: BoxConstraints(minWidth: 150, maxWidth: 300),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5)),
      child: Text("")
    )

score 4 · Answer 7 · answered Jan 22 '21 at 11:26

4

This is how i fixed it

Center(
    child: Container(
      child: this.child,
      width: 300,
      height: double.infinity,
    ),
  )

answered Jan 22 '21 at 11:26

Pranay Dutta

2,483
2
30
42

score 1 · Answer 8 · answered Mar 15 '19 at 15:01

1

Maybe use a Flexible around the text and then wrap the Flexible in a fixed size containter? Just an idea.

answered Mar 15 '19 at 15:01

user11209319

11
1

I don't want to give fixed size to the container because container is the one which is providing the blue background and if I give it a fixed size then even when I show "Loading" message the blue container will not shrink to adapt to short text. – Nishant Desai Mar 15 '19 at 20:04

score 0 · Answer 9 · edited May 11 '20 at 06:46

0

I know it's late, but someone may get help in the future.
I used the auto_size_text plugin to get it done:

AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

edited May 11 '20 at 06:46

סטנלי גרונן

2,917
23
46
68

answered May 11 '20 at 06:23

Al Mamun

630
2
8
21

score 0 · Answer 10 · edited Jan 19 '21 at 14:28

In my case my solution was this: Wrapped in Row and add Spacer (in comment bubble widget I didn't define either width any max-width. it grows depends on the text. to limit width added padding to comment bubble.

return Row(
      children: [
          CommentBubble(
              chatText: snapshot.get('text'),
              sentAt: snapshot.get('sentAt'),
              sendBy: snapshot.get('sendBy'),
          ),
          Spacer(),
      ],
);

Limit max width of Container in Flutter

10 Answers10

Linked