I'm trying to show a text in multiple lines, I mean like this:
"I am a text
and I finish here"
When I try to do that, I see a bar that says "Right Overflowed by 443 pixels". I have this UI structure:
@override
Widget build(BuildContext context) {
return Card(
child: Scaffold(
body: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(15.0),
child: Image.asset('images/place.png'),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
child: Text(
_placeCard.description,
style: TextStyle(),
softWrap: true
)
)
],
),
],
),
)
);
}
Where _placeCard.description is something like : "nce thethethe the the the 1500s, when an unknown printer took a galley of type and scrambled it to"
Could someone help me or give me any feedback?
The correct way to do things is using things made for the things you need. If you want a line break (enter), use <br> ; If you want to define a paragraph, use <p> . Show activity on this post. According to this, the <br> element is used to insert a line break without starting a new paragraph.
Wrap your Text
widget using a Flexible
widget.
like,
//updated read: aziza comment
Flexible(//newly added
child: Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
child: Text(
_placeCard.description,
style: TextStyle(),
softWrap: true
),
)
)
A simple example in below link:
https://gist.github.com/Blasanka/264510a0e7e5aaa151f02ada19fd466d
Update:
Above solution wraps the Text
widget but in your question code snippet, the problem is you are using two Column
s inside a Row and you havent added constraint. So, the easy solution to wrap those two Column
widget using Flexible
widgets.
like below,
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Column(
//...
),
),
Flexible(
child: Column(
//...
),
),
],
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With