1

There's no overflow error when I directly use a Text widget as shown below. There's more content which is beneath the visible part of the screen, I surely can't scroll but there's no overflow error.

Widget build(_) => Text(aLongString);

However, if I wrap the same Text inside a Column like this:

Widget build(_) => Column(children: [Text(aLongString)]);

I start seeing the overflow error given the fact that, the Column provides a maxHeight of infinity to its children for layout.

The question isn't about how to solve the problem, it's rather why the text shows overflow error when used in a Column but not when used directly? It should be the other way around.

iDecode
  • 22,623
  • 19
  • 99
  • 186
  • Does this answer your question? [flutter wrap text instead of overflow](https://stackoverflow.com/questions/54634093/flutter-wrap-text-instead-of-overflow) – bluenile Nov 22 '20 at 08:15
  • @bluenile No, please read the question carefully. – iDecode Nov 22 '20 at 08:16
  • Ok I thought the answer in that link may be answers your question - Row and Column are Flex widget and don't scroll, if there is not enough space flutter raises an overflow error. – bluenile Nov 22 '20 at 08:21
  • @bluenile Did you know, there's infinite height available for `Column` children, that's why the question was asked. – iDecode Nov 22 '20 at 08:22
  • Flex displays its children in a one-dimensional array. The Flex widget does not scroll (and in general it is considered an error to have more children in a Flex than will fit in the available room). src : https://api.flutter.dev/flutter/widgets/Flex-class.html . This page also explains the Layout algorithm. – bluenile Nov 22 '20 at 08:45
  • @bluenile Yes, I know all that stuff but still there isn't much related to my question. – iDecode Nov 22 '20 at 09:13
  • @pskink Yes, I know that. In Column, you get a max height of infinity but in Text, you get max height of screen height (viewport). That's why I raised the question, when there's infiite space for `Text` inside `Column`, why the overflow error and when there's bounded height for `Text` (when used directly), there's no overflow. – iDecode Nov 23 '20 at 08:43
  • read https://flutter.dev/docs/development/ui/layout/constraints again and pay special attention to word `"overflow warning"` (examples #14 and #24) - they explain when that overflow happens – pskink Nov 23 '20 at 08:59
  • @pskink Sir, I think I am not able to make you understand (maybe because of my poor English skills). I know the text will overflow if it's more than `Column`'s height, but the question was the Column is providing a maxHeight of infinity, correct, why should it overflow then? And if this overflows, then why not a direct home of `MaterialApp` which is `Text`. – iDecode Nov 23 '20 at 10:51
  • ok, tell me what is unclear in example #24? this is almost your case: they have `Row` you have `Column` - their `Row` overflows in x-axis (width), your `Column` overflows in y-axis (height) - so this is almost the same case, only orientation changes - they explain that by: `"Since Row won’t impose any constraints onto its children, it’s quite possible that the children might too big to fit the available width of the Row. In this case, just like an UnconstrainedBox, the Row displays the “overflow warning”."` - the same applies to your `Column` and its height – pskink Nov 23 '20 at 11:18
  • @pskink Yes sir, you're right, there's an error. But why the error? The `Column` is providing `Text` an `infinite` amount of height, had it provided a fixed height, the error would be pretty clear, but we're talking about infinite height. Second part, when `Text` is directly used, it's provided a bounded height (screen height in my example), but there's just no error. Shouldn't it be the other way around? – iDecode Nov 23 '20 at 11:24
  • 1
    no, `Text` will never show that error as it is shown by [DebugOverflowIndicatorMixin](https://api.flutter.dev/flutter/rendering/DebugOverflowIndicatorMixin-mixin.html) class which is mixed only in `RenderFlex` and `RenderUnconstrainedBox` classes – pskink Nov 23 '20 at 12:18
  • @pskink Now this answers the question. Thank you sir. I'd love to see it written below in its deserved place. – iDecode Nov 24 '20 at 00:42

2 Answers2

0

OK so you just want to know why we get overflow error in Column but not in text alone right??

here is the answer

Ans.

If you go to the Docs of Column Class you will find out the answer,

The yellow and black striped banner
When the contents of a Column exceed the amount of space available, 
the Column overflows, and the contents are clipped. In debug mode, 
a yellow and black striped bar is rendered at the overflowing edge to 
indicate the problem, and a message is printed below the Column saying 
how much overflow was detected.

they have also mentioned the Layout algorithm the column uses to build its children.

but if you go to the docs of Text there is no such talk about the Overflow since Text() is not a Layout like Row or Column but just a simple widget which is meant to be inside a layout.

~Still I agree with your point there should also be a Overflow error shown for Text alone ~

EDIT:

Overflow occurs when max height exist (not infinity as you noted, if there's no size exist for Column there will be a assertion error), columns max height is given by its parent, if column is the root Widget, the screen size will be the constraint so the overflow, where Text doesn't have any max height constraint or any Constraint so results in no overflow

EDIT 2:

By default Column() has mainAxisSize:MainAxisSize.max and upon going to its docs

mainAxisSize:MainAxisSize.max

Maximize the amount of free space along the main axis, 
subject to the incoming layout constraints.
If the incoming layout constraints have a small enough 
[BoxConstraints.maxWidth] or [BoxConstraints.maxHeight], 
there might still be no free space.
If the incoming layout constraints are unbounded, 
the [RenderFlex] will assert, 
because there would be infinite remaining free space 
and boxes cannot be given infinite size.

so since here incoming Constraint are of Text which are null according to the above edit so this gives overflow error

Akshit Ostwal
  • 451
  • 3
  • 14
  • Hi Akshit, thanks for your answer. I know the docs do mention that but the question was why, why there's an error given the fact that `Text` inside the `Column` is given an unbounded height of infinity. – iDecode Nov 22 '20 at 17:55
  • Thanks to @Yadu for the edit I think now it clarify why is it so – Akshit Ostwal Nov 23 '20 at 10:13
  • @Yadu I think you should have posted that as a separate answer altogether. Can you please explain that if I provide a height of `double.infinity` to a widget, does it mean that I'm providing it a viewport height (screen height for simplicity)? Akshit you can also speak if you understood his comment well enough. – iDecode Nov 23 '20 at 10:59
  • I think the EDIT 2 will clarify even further ... @iDecode – Akshit Ostwal Nov 23 '20 at 12:26
  • 1
    `here incoming Constraint are of Text which are null` did you mean `incoming constraints of a Text are null?` If yes, then that's not true mate. Incoming constraints of a `Text` are `maxWidth` and `maxHeight` as provided by the viewport. – iDecode Nov 24 '20 at 00:14
  • 1
    `Incoming constraints of a Text are maxWidth and maxHeight as provided by the viewport.` I couldn't find any `maxWidth` and `maxHeight` in `Text` as well as `viewport` class. – Akshit Ostwal Nov 25 '20 at 06:00
  • `Column` too doesn't have `maxWidth` and `maxHeight` property in it but do you think it doesn't get those constraints from its parent? What happens if you wrap a `Column` in a `SizedBox` and provide a `height` of say `100`, what's that? They are the incoming constraints for `Column`, got the point? – iDecode Nov 25 '20 at 06:23
0

The problem occurs in Column because, Column renders only if a constraints exists(which is obtained automatically from its parent, otherwise .hasSize assertion fails) , so when being a parent of the Text widget it doesn't allow its children's to overflow its constraint, where when rendering just the Text (in your case) Its parent is allowing the Text to have whatever the size it wants

Yadu
  • 2,979
  • 2
  • 12
  • 27
  • I'll come talk about the first part later, but in your second part, you said the parent allows the `Text` to have whatever size it wants. But I think that's not true. The parent forces the `Text` to have full screen width and height. Am I wrong? – iDecode Nov 23 '20 at 11:28
  • as I Understand the overflow happens because, size( constraints) exists for the column, for the text it doesn't exists, constraints is what forces the max/min available space for its children – Yadu Nov 23 '20 at 12:20
  • And I think, the constraints parent passes to its child are respected no matter who the child is. – iDecode Nov 24 '20 at 00:08