Make a Column of Columns scrollable

Question

I'd like to make a widget scrollable, which is basically Column which contains other columns.

My TreeWidget may contain one or more TreeWidgets like so. I tried to wrap it inside a SingleChildScroolView like so:

SingleChildScrollView {
TreeWidget {
  TreeWidget{
    TreeWidget {
      Column {
         Text( 'something' )
         Text( 'something' )
      }
    }
  }
}
}

Note, that I do not know the size of any TreeWidget beforehand. Unless I first walk the tree downwards, collect heights and finally compute the total height.

When this renders, Flutter complains about infinite size.

Thus my question: How to I make a recursive widget like the above scrollable?

Error Message:

The relevant error-causing widget was: Column Column:file:///..path.../lib/main_widget.dart:46:16

The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

Please copy/paste the exact error message. ALSO: look at the suggestions in this thread: https://stackoverflow.com/a/61376067/421195 — paulsm4, May 28 '23 at 23:28
1) Thank you for posting the full error text - that was helpful :) 2) I was suggesting you look at ALL the suggestions in the ENTIRE thread, to see if ANY of them gave you any ideas for your particular use case. Don't just look at one example and expect it to work, verbatim :( 3) In any case, the general solution is: a) put your "Columns" in a "Scroll View" (as you've done), and b) interpose some kind of "constraint" between them. — paulsm4, May 28 '23 at 23:53
Thx! Sorry. Being kind of angry, that from time to time I hang in such a situation. Meanwhile, I hate this indefinite size issue. Please excuse for my kind of harsh replies. — SteAp, May 29 '23 at 00:01

score 1 · Answer 1 · answered May 28 '23 at 23:39

1

If your TreeWidget contains a Column internally, you likely need to "Expanded" each of the columns inside other columns. For example:

SingleChildScrollView(
    child: Column(
        children: [
            Expanded( // you need to say that the column takes up the available space inside the other column
                child: Column(...)
            ),
            ...
        ]
    ),
);

And/or, you can possibly wrap everything inside a SizedBox and give it a fixed height using its height property. This height property could also be set to MediaQuery.of(context).size.height for it to dynamically size to the full screen height.

answered May 28 '23 at 23:39

Matthew Trent

2,611
1
17
30

ConstrainedBox with maxHeight constraint doesn't change anything. – SteAp May 28 '23 at 23:42
Since the widget structure is constructed recursively, I don't know its size beforehand. Depends on the data passed in at construction time. – SteAp May 28 '23 at 23:43
If I make all TreeWidget inside the Column expanded, the render throws an error even earlier as before. – SteAp May 28 '23 at 23:45
MediaQuery.of(context).size.height: Doesn't work, when the widget isn't the top mode most one that consumes the whole screen / window size. – SteAp May 28 '23 at 23:47
2

@SteAp - Matthew Trent is definitely pointing you in the right direction. But don't take it "literally", and expect everything to work "verbatim". For example, you might make your "Columns" a CHILD of some constraint widget, or your parent "Tree Widget" a child of of the constraint widget. You need to "experiment" a bit with different alternatives. – paulsm4 May 28 '23 at 23:54
@paulsm4 I probably have a misunderstanding: Why doesn't the renderer walks down the tree, finds terminal widgets, gets their height and while walking back up, adds these to get their compound height? – SteAp May 29 '23 at 00:06

Make a Column of Columns scrollable

1 Answers1