Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Limit max width of Container in Flutter

  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

  1. Loading text enter image description here
  2. Some very long text enter image description here

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. enter image description here

like image 329
Nishant Desai Avatar asked Mar 15 '19 14:03

Nishant Desai


6 Answers

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

I hope this helps!

like image 151
Kappadona Avatar answered Oct 16 '22 08:10

Kappadona


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'),
    ),
  ),
),
like image 44
Dinesh Avatar answered Oct 16 '22 08:10

Dinesh


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.

like image 12
Jitesh Mohite Avatar answered Oct 16 '22 07:10

Jitesh Mohite


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.

like image 5
Pål Brattberg Avatar answered Oct 16 '22 08:10

Pål Brattberg


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("")
    )
like image 4
Vicky Salunkhe Avatar answered Oct 16 '22 08:10

Vicky Salunkhe


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

IntrinsicWidth(
  child: Container(
    constraints: BoxConstraints(maxWidth: 200),
    child: Row(
      children: [
       
      ],
    ),
  ),
);
like image 4
Mohan Sai Manthri Avatar answered Oct 16 '22 07:10

Mohan Sai Manthri