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.
CodePudding user response:
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,
);
},
),
),
],
),
)