0

GOAL: I need to have this column be scrollable (vertically).

EXPECTED: This column to be scrollable.

ACTUAL: I get an error in my console and my app is a blank white screen.

To mention, I did read through the other BoxConstraints question here on Stack Overflow.

Unfortunately it did not work.

Ultimately, I have a column with children of various heights. The combined height of the children is greater than the viewport height.

I used SingleChildScrollview and followed the instructions from:

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

LayoutBuilder, ConstrainedBox, BoxConstraints and IntrinsicHeight were all used and I still get that error.

My phone is currently a blank white screen (with "Debug" in the upper right corner).

So here is my understanding:

SingleChildScrollView makes the content within to be scrollable by granting infinite height.

A Column naturally takes up the full height of its parent.

The 2 combined means a Column that will stretch on until forever, or until the app crashes.

A LayoutBuilder is used to obtain the size of the viewport.

ConstrainedBox is used to set the MINIMUM height of the Column. This says to me that the Column can NOT be any smaller than a given height but can be as big as infinity.

The "magic" happens with IntrinsicHeight which forces the column to be exactly as big as its contents. THIS is what stops the column from going to infinity.

Despite everything, I am still getting an error.

I hope someone can help; the following is my code:

              padding: EdgeInsets.all(15),
              color: Colors.white,
              child: LayoutBuilder(
                builder:
                    (BuildContext context, BoxConstraints viewportConstraints) {
                  return SingleChildScrollView(
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                        minHeight: viewportConstraints.maxHeight,
                      ),
                      child: IntrinsicHeight(
                        child: Column(
                          children: <Widget>[
                            Column(
                              children: [
                                Text(),
                                RaisedButton(),
                                Text(),
                               ],
                            ),

                            Column(
                              children: [
                                Text(),
                                RaisedButton(),
                                Text(),
                               ],
                            ),

                            Column(
                              children: [
                                Text(),
                                RaisedButton(),
                                Text(),
                               ],
                            ),

The error thrown reads this:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderIntrinsicHeight's layout() function by the
following function, which probably computed the invalid constraints in question:
  RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:270:13)
The offending constraints were:
  BoxConstraints(0.0<=w<=330.0, h=Infinity)
The relevant error-causing widget was:
  ConstrainedBox

There is this interesting line that reads:

The following RenderObject was being processed when the exception was fired: RenderConstrainedBox#d1ae8 relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: ConstrainedBox ← _SingleChildViewport ← IgnorePointer-[GlobalKey#f983f] ← Semantics ←
    _PointerListener ← Listener ← _GestureSemantics ←
    RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#d70da] ← _PointerListener ← Listener
    ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#d055d] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=330.0, 0.0<=h<=Infinity)
  **size: MISSING**
  additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=Infinity)

Thanks in advance to everyone who helps!

ZenithF0RTE
  • 363
  • 4
  • 11
  • So you want to make three blocks of [Text(), RaisedButton(), Text()] scrollable, right? – Pavel Sep 02 '20 at 21:05
  • Yes. To elaborate, it is a block of text which sits above a button which sits above more text. There may be more added as this project progresses. – ZenithF0RTE Sep 03 '20 at 06:20
  • so why dont you use `ListView` / `ListView.builder`? – pskink Sep 03 '20 at 06:52
  • What is purpose of ConstrainedBox with minHeight? – Pavel Sep 03 '20 at 08:00
  • And what are you using IntrinsicHeight for? – Pavel Sep 03 '20 at 08:00
  • To Pavel: it was part of the instructions/tutorial. ConstrainedBox is supposed to give the column a min height and InstrinsicHeight gives a max height (of sorts). The same issue came up with ListView / ListView.builder – ZenithF0RTE Sep 04 '20 at 04:37
  • and what *exactly* do you want to achieve? whats your goal actually? – pskink Sep 04 '20 at 05:18
  • So I want to be able to scroll down on my mobile phone to see the text and buttons (as you scroll down). – ZenithF0RTE Sep 04 '20 at 05:23
  • Now I did switch to ListView AND gave the parent container a fixed height but now everything is squished into that fixed height. If I increase the height of the parent container, I get that yellow and black overflow error / warning. – ZenithF0RTE Sep 04 '20 at 05:24
  • you can use `ListView.builder` with the (possibly scrollable) content that can be 10 / 100/ /1000000 pixels high - this is what `ListView` is designed for - see https://flutter.dev/docs/cookbook/lists/long-lists and https://flutter.dev/docs/cookbook/lists in general – pskink Sep 04 '20 at 05:44
  • OK so I THINK I got the answer. It works and does not spit out an error. I had wrapped my listView (and every other scrollable widget) around a column. I originally used a column to stack everything on top of each other but apparently listView does the same. Now it works! Thanks everyone for your help! Couldn't have done it without you! – ZenithF0RTE Sep 05 '20 at 03:57
  • great, feel free to post a self answer then - it could be helpful to others – pskink Sep 05 '20 at 05:25

1 Answers1

0

I had wrapped my listView (and every other scrollable widget) around a column. I originally used a column to stack everything on top of each other but apparently listView does the same.

ZenithF0RTE
  • 363
  • 4
  • 11
  • Hi Brian. Please do not ask questions in your answers. There's no space for questions to be asked in the answering section. – TT. Sep 06 '20 at 21:34
  • In principe, yes. It is better to ask the question in a new question. – TT. Sep 10 '20 at 05:54