I am trying to create a common component with an image on the left and an introduction on the right. When the introduction is long, the component does not render well.
I know there is a commonly known method of wrapping Text
in a Flexible
Widget and have tried it.
That did not work.
I have an example on dartpad. Can anyone tell me how to get it to display without overflow here?
https://dartpad.dev/?id=ee205a74591b34665c04abecc5012211
CodePudding user response:
In the column widget add a row. Then if you add a flexible widget the text will go down on overflow
Column(
children : [
Text("some small text here"),
Row(
children : [
Flexible(
child : Text("Really long text here"),
)
]
)
]
}
CodePudding user response:
return GestureDetector(
child: Row(children: [
// alt image component
SizedBox(
height: 100,
width: 100,
child: Container(
color: Colors.red,
),
),
// item description
Expanded(
child: Column(
children: [
Text("user name"),
Text(
"user comment text: jump jump jump high jump high jump big jump big jump choo choo choo ya ya ya ri ri ri uh uh uh user comment text: jump jump jump high jump high jump big jump big jump choo choo choo ya ya ya ri ri ri uh uh uh"),
],
),
),
]));