ScrollableList as a child of Row gets infinite size

[Trilok Acharya]

Hi devs, 

 I'm new to Flutter (liking it a lot so far). I have a ScrollableList as a child of a Row and this specific combination seems to cause Flutter to run into some sizing issue. The exact error is below. I should mention that if I swap out the Row with a Column or the ScrollableList with a Text object or something else, it doesn't throw the same error. Sample code to replicate this issue is attached. I can't find any examples where ScrollableList or Row were given width somehow or that a BoxConstraint is necessarily required. It's likely I'm missing something simple, but I'm stuck :)

Error:

I/flutter : RenderList object was given an infinite size during layout.

I/flutter : This probably means that it is a render object that tries to be as big as possible, but it was put

I/flutter : inside another render object that allows its children to pick their own size.

I/flutter : The nearest ancestor providing an unbounded width constraint is:

I/flutter :   RenderFlex NEEDS-LAYOUT

I/flutter :   creator: Row ← ConstrainedBox ← Container ← LayoutId-['_ScaffoldSlot.body'] ←

I/flutter :   CustomMultiChildLayout ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey ink

I/flutter :   renderer] ← NotificationListener<LayoutChangedNotification> ← DecoratedBox ← ⋯

I/flutter :   parentData: offset=Offset(0.0, 0.0)

I/flutter :   constraints: BoxConstraints(w=411.4, h=603.4)

I/flutter :   size: MISSING

I/flutter :   direction: FlexDirection.horizontal

I/flutter :   mainAxisAlignment: MainAxisAlignment.start

I/flutter :   mainAxisSize: MainAxisSize.max

I/flutter :   crossAxisAlignment: CrossAxisAlignment.center

I/flutter :   textBaseline: null

I/flutter : The constraints that applied to the RenderList were:

I/flutter :   BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=603.4)

I/flutter : The exact size it was given was:

I/flutter :   Size(Infinity, 603.4)

I/flutter : See https://flutter.io/layout/ for more information.

Flutter Doctor output:

[✓] Flutter (on Linux, channel alpha)

    • Flutter at /home/trilok/Documents/sdk/flutter

    • Framework revision 8128c56f8f (13 days ago), 2016-09-12 16:46:52

    • Engine revision 12fc138524

    • Tools Dart version 1.20.0-dev.1.0

[✓] Android toolchain - develop for Android devices (Android SDK 23.0.1)

    • Android SDK at /home/lowk/Documents/sdk/android-sdk-linux

    • Platform android-23, build-tools 23.0.1

    • Java(TM) SE Runtime Environment (build 1.8.0_72-b15)

[✓] Atom - a lightweight development environment for Flutter

    • flutter plugin version 0.2.5

    • dartlang plugin version 0.6.39

[✓] Connected devices

    • Nexus 6P • 84B7N15A28015578 • android-arm

Thanks,

Trilok

[Adam Barth]

On Sun, Sep 25, 2016 at 8:32 AM Trilok Acharya <tri...@trilok.info> wrote:

 I'm new to Flutter (liking it a lot so far).

Welcome!

 

I have a ScrollableList as a child of a Row and this specific combination seems to cause Flutter to run into some sizing issue. The exact error is below. I should mention that if I swap out the Row with a Column or the ScrollableList with a Text object or something else, it doesn't throw the same error. Sample code to replicate this issue is attached. I can't find any examples where ScrollableList or Row were given width somehow or that a BoxConstraint is necessarily required. It's likely I'm missing something simple, but I'm stuck :)

The issue is that a ScrollableList tries to be as large as possible horizontally (when scrolling vertically) and Row goes its children unbounded constraints horizontally.  When you combine those two, that means the ScrollableList tries to be infinitely wide, which is an error.

Let me give you some background about why this widgets behave this way and then I'll suggest some possible resolutions.

ScrollableList is designed to support a large number of children, which means it doesn't have time during layout to visit each of its children.  (It only has time to visit the children that are actually visible.)  That means it doesn't know how wide it needs to be to fit its widest child, so instead it makes itself as wide as possible and forces each child to be exactly that wide.

Row places its children horizontally, and doesn't know what horizontal constraints to give its children.  Originally we had it give its children a max width that matched its own width, but that often resulted in layouts where the first child would fill up the whole width (because it selected the maximum width available) and the remainder of the children didn't have any space.  Instead, it gives its children an unbounded width constraint so that they need to pick a width that has some intrinsic meaning to them.

The solution for your particular case depends on what effect you're trying to create.  If you want the Row to tell the ScrollableList how wide to be, you can wrap the ScrollableList in a Flexible widget.  When Row lays out its children, it first asks hits non-flexible children to decide on their size and then it divides up whatever space is left and assigns it to the flexible children.  If you wrap the ScrollableList in a Flexible, the Row will size all the other children and give the remaining space to the ScrollableList.

If that solution doesn't do what you want, let me know what you're trying to achieve and I might be able to suggest another solution.

(Also, I'm curious whether you clicked the link in the error message to https://flutter.io/layout/ and whether you found that page helpful or not.)

Thanks!

Adam

 

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Trilok Acharya]

Thanks so much, Adam. I wasn't expecting an answer over the weekend :) And, using Flexible worked for me since I'm trying to create a widget that has 3 scrollable lists side by side (with only one item visible) to represent a timer with Hours, Mins and Secs.

I did look at the layout page, but I couldn't figure out from it that using Flexible would somehow constraint the children of Row. I knew I needed some way of sizing the scrollable list's width, but I didn't want to specify a hard value and wanted it to fill up the rest of the screen's width instead. It wasn't intuitive to me that a Flexible would actually put a constraint, but the way you described it makes sense.

From the layout page: 

"In unbounded constraints, they try to fit their children in that direction. In this case, you cannot set flex on the children to anything other than 0 (the default). In the widget library, this means that you cannot use Flexible when the flex box is inside another flex box or inside a scrollable. If you do, you’ll get an exception message pointing you at this document."

Doesn't this mean that I shouldn't be able to use Flexible inside Row since it is a Flex box inside another flex box and the Row itself didn't have a constraint?

If I'm not the only one who's run into this issue, perhaps some examples in the layout page showing how to put size constraints in similar situations may be helpful.

Thanks again!

Trilok

[Adam Barth]

On Sun, Sep 25, 2016 at 10:16 AM Trilok Acharya <tril...@gmail.com> wrote:

Thanks so much, Adam. I wasn't expecting an answer over the weekend :) And, using Flexible worked for me since I'm trying to create a widget that has 3 scrollable lists side by side (with only one item visible) to represent a timer with Hours, Mins and Secs.

Great!

I did look at the layout page, but I couldn't figure out from it that using Flexible would somehow constraint the children of Row. I knew I needed some way of sizing the scrollable list's width, but I didn't want to specify a hard value and wanted it to fill up the rest of the screen's width instead. It wasn't intuitive to me that a Flexible would actually put a constraint, but the way you described it makes sense.

From the layout page: 

"In unbounded constraints, they try to fit their children in that direction. In this case, you cannot set flex on the children to anything other than 0 (the default). In the widget library, this means that you cannot use Flexible when the flex box is inside another flex box or inside a scrollable. If you do, you’ll get an exception message pointing you at this document."

Doesn't this mean that I shouldn't be able to use Flexible inside Row since it is a Flex box inside another flex box and the Row itself didn't have a constraint?

I can see how that can be confusing.  Row itself is a Flex (notice that Row inherits from Flex).  That page was written at a time when most people were using Flex directly instead of using Row and Column.  We'll update it to be less confusing.

If I'm not the only one who's run into this issue, perhaps some examples in the layout page showing how to put size constraints in similar situations may be helpful.

Yes, definitely.  It's good to know that you found that page.  That means we should work to improve that page rather than work to make it easier for people to find the page.

Thanks again,

Adam

[Trilok Acharya]

I did manage to see the link, but I had to use "flutter run" and look at it in the console because Atom's console logging is tiny on my screen.

BTW, I just noticed that the ScrollableList's page says:

"A scrollable list of children that have equal size."

which seems to be different from what you had mentioned about how ScrollableList can't visit all it's children and that they can have different sizes. Does the doc need to be updated?

Thanks,

Trilok

[Adam Barth]

On Sun, Sep 25, 2016 at 2:49 PM Trilok Acharya <tri...@trilok.info> wrote:

I did manage to see the link, but I had to use "flutter run" and look at it in the console because Atom's console logging is tiny on my screen.

BTW, I just noticed that the ScrollableList's page says:

"A scrollable list of children that have equal size."

which seems to be different from what you had mentioned about how ScrollableList can't visit all it's children and that they can have different sizes. Does the doc need to be updated?

I'll update the docs to be more clear.  ScrollableList actually forces the children to have a specific size, which it determines.  The reason for that is because it can't visit all its children to see how big they want to be.