Limit max width of Container in Flutter
User InterfaceFlutterFlutter LayoutWord WrapFlutter ContainerUser Interface Problem Overview
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
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.
User Interface Solutions
Solution 1 - User Interface
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!
Solution 2 - User Interface
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'),
),
),
),
Solution 3 - User Interface
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.
Solution 4 - User Interface
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.
Solution 5 - User Interface
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("")
)
Solution 6 - User Interface
For me at least putting the Constrained box in IntrinsicWidth has solved issue.
IntrinsicWidth(
child: Container(
constraints: BoxConstraints(maxWidth: 200),
child: Row(
children: [
],
),
),
);
Solution 7 - User Interface
This is how i fixed it
Center(
child: Container(
child: this.child,
width: 300,
height: double.infinity,
),
)
Solution 8 - User Interface
Maybe use a Flexible around the text and then wrap the Flexible in a fixed size containter? Just an idea.
Solution 9 - User Interface
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,
)
Solution 10 - User Interface
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(),
],
);