Flutter LayoutBuilder BoxConstraints(unconstrained) inside Positioned inside Stack (BoxConstraints forces an infinite width and infinite height)

Question

I have an Stack with multiple children, some of them inside of Positioned with different vertical and horizontal values setted.

Some of the childs need to know the Stack constraints in order to measure themselves based on the available width and height.

I found out that if you use a LayoutBuilder inside of a Positioned and the left, top, right or bottom are setted the BoxConstraints would be unconstrained

I need a way to get the Stack size (dynamic, depends on where the Stack is used) in its childrens, and also to be able to position them wherever I want, bottom/right, top/left etc...

Here you have a minimal reproducible example with the BoxConstraints forces an infinite width and infinite height error caused by BoxConstraints(unconstrained):

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        Positioned(
          bottom: 0, // <- commenting this the constraints would have a proper size, in this 
                     // particular example the full screen width and height.
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return Container(
                // BoxConstraints forces an infinite width and infinite height error since 
                // constraints are unconstrained so width and height are infinite
                width: constraints.maxWidth,
                height: constraints.maxHeight,
                color: Colors.redAccent,
              );
            },
          ),
        ),
      ],
    ),
  );
}

I'm aware that removing bottom:0 and using alignment: Alignment.bottomLeft will solve the issue on this example, but as I said, I have multiple children, if I want another child on the top, this solution wont work for both.

Answer 1

You can wrap the widget with an Align widget instead of a Positioned:

 Scaffold(
        body: Stack(
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  return Container(
                    // BoxConstraints forces an infinite width and infinite height error since
                    // constraints are unconstrained so width and height are infinite
                    width: constraints.maxWidth,
                    height: constraints.maxHeight,
                    color: Colors.redAccent,
                  );
                },
              ),
            ),
          ],
        ),
      )