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!
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.