"RenderStack object was given an infinite size during layout" when using Positioned inside a Stack

Issue

I’m creating a widget that presents a Stack inside a Container. Inside the Stack there is a dynamic Column inside a Positioned widget, which sticks the Column to the Bottom.

I am trying to wrap the Stack in a SingleChildScrollView, that if the dynamic Column will have lots of children it will be able to scroll.

But after I add the scroll view I get this error message:

RenderStack object was given an infinite size during layout.

Solution

A scrollView doesn’t have height, it will use infinite height for it’s children. So the stack should be wrapped in a sizedBox widh a known height in case that you want that. If you want the stack to fill the screen then remove the singleChildScrollview completely. And if you want the stack to be scrollable from the inside. Just add SingleChildScrollView inside the stack

return Scaffold(
      body: Container(
        color: Colors.blue[100],
        child: Stack(
          children: [
            Positioned.fill(child: SingleChildScrollView(child: MyColumn()))
          ],
        ),
      ),
    );

EDIT 1:
Ok the problem is the layout itself. Since you only use the stack to position the image. And you know the widht and height of the image, and the background shape fills all the items. We could

Isolate the stack only to the image, and use padding and some calculation to have the layout build in a similar way.

Then render everything else inside a normal column

My implementation https://dartpad.dev/230b14d8f0b22b45929a75c208786257

Answered By – ValdaXD

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)