How to make your text wrap inside a row? - flutter

Question

I have a text widget inside of a row, who's text I'm retrieving from API, and can tend to get long sometimes. I want the text to wrap and move to next line when it gets too long, however its overflowing.
Is there a way to fix this ?
Thanks
My code
return ListView.builder(
itemCount: values == null ? 0 : values.length,
itemBuilder: (BuildContext context, int index) {
return Ink(
child: InkWell(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
.......
Row(children: <Widget>[Icon(Icons.account_balance, size: 13.0, color: Colors.grey),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(values[index].societyName, style: TextStyle(color: Colors.grey, fontSize: 15.0), maxLines: 2, overflow: TextOverflow.clip,), //TEXT HERE
)],),
.....
],
),
),
),
),
);
},
);
Edit:
I tried using Expanded (and Flexible ) to wrap my row, however it gives the following error:
I/flutter (16255): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (16255): The following assertion was thrown during performLayout():
I/flutter (16255): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (16255): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (16255): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (16255): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (16255): space in the vertical direction.
I/flutter (16255): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (16255): cannot simultaneously expand to fit its parent.
I/flutter (16255): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (16255): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (16255): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (16255): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (16255): constraints provided by the parent.
It's owing to the fact that I have my column inside a ListView Card.
Is there any other alternative to fix this ?
I tried the suggestion given in the console, but it didn't work.

Answer 1

I have same question and solved!
check this, it has example code and screenshots
https://gist.github.com/yamarane/9269513a3c21eafb93a782fc387b9785
UPDATE(Working!):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Scaffold(body: Some()),
);
}
}
var values = [
"111111111111111111111111111qqqqqqqqqqqqqqqqqqqqqqq",
"222222222222222222222222222222222",
"333333333333333333333333333",
"4"
];
class Some extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: values == null ? 0 : values.length,
itemBuilder: (BuildContext context, int index) {
return Ink(
child: InkWell(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Icon(Icons.account_balance, size: 13.0, color: Colors.grey),
Container(
padding: const EdgeInsets.only(left: 10.0),
width: MediaQuery.of(context).size.width * 0.8,
child: Text(
values[index],
style: TextStyle(color: Colors.grey, fontSize: 15.0),
), //TEXT HERE
)
],
),
),
),
),
);
},
);
}
}

Answer 2

That's because the Row, which wraps your Text, is wrapped inside a Column, and therefore it does not have a defined width. Wrap your Row with Expanded to give a predefined width to fill the remaining space.
Expanded(
child: Row(
children: <Widget>[
Icon(
Icons.account_balance,
size: 13.0,
color: Colors.grey
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
values[index].societyName,
style: TextStyle(color: Colors.grey, fontSize: 15.0),
maxLines: 2,
overflow: TextOverflow.clip,
), //TEXT HERE
),
],
),

Answer 3

try Expanded property
Expanded(
child: Text(values[index].societyName, style: TextStyle(color: Colors.grey, fontSize:
15.0), maxLines: 2, overflow: TextOverflow.clip,),
)

Answer 4

Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(values[index].societyName,
style: TextStyle(color: Colors.grey, fontSize: 15.0),
maxLines: 2,
overflow: TextOverflow.clip,), //TEXT HERE
)
)