When creating a Text widget with a long string in Flutter, it wraps its text when put directly in a Column. However, when it is inside Column-Row-Column, the text overflows the side of the screen.
How do I wrap text inside a Column-Row-Column?
And what is the reason for this difference? It would seem logical to me that any child of the upper column would have the same width? Why is the width unbounded?
I tried putting the text in Expanded, Flexible, Container and FittedBox, based on other answers, but it leads to new errors I don't understand.
Example:
MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(title: Text("MyApp"),),
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.
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. ")
],
),
],
),
],
),
),
)
Best Answer
Row
andColumn
areFlex
widget and don't scroll, if there is not enough space flutter raises an overflow error.If this occurs an
Expanded
or aFlexible
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
andFlexible
wraps in the cross-axis direction.The long story
A step by step approach may help to understand the problem.
First, consider this scenario:
It is a column widget that overflows on vertical direction as clearly reported by flutter:
Now, a Row inside a Column:
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
andColumn
are bothFlex
widgets:The Expanded widget
Consider this layout, a row with two items, stiched togheter
Now the first item
Expanded
to fill all the available space:Finally, when you expand a very long string you will notice that the text wraps in the cross-axis direction: