flutter wrap text instead of overflow
You need to wrap the last Column
with - Expanded
or Flexible
widget.
That Way Column
can take up the required available space for the text.
body: Column(
children: <Widget>[
Row(
children: <Widget>[
// The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
Expanded(
child: Column(
children: <Widget>[
Text("Short text"),
Text(
"Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
],
),
),
],
),
],
),
Row
and Column
are Flex
widget and don't scroll, if there is not enough space flutter raises an overflow error.
If this occurs an Expanded
or a Flexible
widget may be used to wrap a long text.
In the docs it is not clearly stated, but beyond expanding to fill the available space in the main axis, Expanded
and Flexible
wraps in the cross-axis direction.
The long story
A step by step approach may help to understand the problem.
First, consider this scenario:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(
title: Text("MyApp"),
),
body: Column(
children: List.generate(100, (idx) => Text("Short text"))
),
),
);
}
}
It is a column widget that overflows on vertical direction as clearly reported by flutter:
I/flutter ( 8390): The following message was thrown during layout:
I/flutter ( 8390): A RenderFlex overflowed by 997 pixels on the bottom.
I/flutter ( 8390):
I/flutter ( 8390): The overflowing RenderFlex has an orientation of Axis.vertical.
Now, a Row inside a Column:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(title: Text("MyApp"),),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(String.fromCharCodes(List.generate(100, (i) => 65)))
],
),
],
),
),
);
}
}
Now the overflow problem appears on the right side.
I have inserted a Row in a Column just to resemble your case, but the exact same problem emerge if you use a simple Row widget:
Row
and Column
are both Flex
widgets:
- they layout their children in one direction;
- they do not scroll, so if the children occupy more space than available an overflow error is raised;
The Expanded widget
Consider this layout, a row with two items, stiched togheter
Column(
children: <Widget>[
Row(
children: <Widget>[Text('AAAA'), Text('ZZZZ')],
),
],
),
Now the first item Expanded
to fill all the available space:
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Text('AAAA')),
Text('ZZZZ')],
),
],
),
Finally, when you expand a very long string you will notice that the text wraps in the cross-axis direction:
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
Text('ZZZZ')],
),
],
),