Flutter - Positioned Widget in Stack causing Exception
5,753
Solution 1
Add an empty Container
as a child
of the stack :
@override
Widget build( BuildContext context) {
return Stack(
children: <Widget>[
Container(),
Positioned( left: 0.0, top: 0.0, child: _cards[0]),
]
);
}
Solution 2
Other workarounds:
(a) Wrap the Stack on a Container with a known height:
Container(
height: 50,
child: Stack(
children: [
Positioned(top: 10, left: 10, child: Text('My child'))
]),
),
(b) As suggested add empty Container() and Clip.none:
Stack(
clipBehavior: Clip.none,
children: [
Container(),
Positioned(top: 10, left: 10, child: Text('My child'))
]),
Author by
albrnick
Updated on December 02, 2022Comments
-
albrnick over 1 year
I'm getting the below exception when I try to encapsulate the PandemicCard with a Positioned widget. If I render the card lone/no Positioned widget, it works just fine.
I/flutter ( 7331): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 7331): The following assertion was thrown during performLayout(): I/flutter ( 7331): RenderStack object was given an infinite size during layout. I/flutter ( 7331): This probably means that it is a render object that tries to be as big as possible, but it was put I/flutter ( 7331): inside another render object that allows its children to pick their own size. I/flutter ( 7331): The nearest ancestor providing an unbounded height constraint is: I/flutter ( 7331): RenderFlex#2b18c relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT OVERFLOWING I/flutter ( 7331): creator: Column ← Center ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
For this code. Anyone able to help me figure out what I'm doing wrong?
class PandemicCard extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 120.0, width: 76.0, decoration: BoxDecoration( color: Colors.blue, boxShadow: [ BoxShadow( blurRadius: 5.0, color: Colors.grey) ]), child: Text('Hi'), ); } } class PandemicCardStackState extends State<PandemicCardStack> { // final _cards = <PandemicCard>[ PandemicCard(), PandemicCard()]; final _cards = <PandemicCard>[ PandemicCard()]; @override Widget build( BuildContext context) { return Stack( // This Bombs! children: <Widget>[ Positioned( left: 0.0, top: 0.0, child: _cards[0])] // This works! // children: <Widget>[ _cards[0]] ); } } class PandemicCardStack extends StatefulWidget { @override PandemicCardStackState createState() => PandemicCardStackState(); }
Thanks for your time!
-
Mazin Ibrahim about 5 yearsbecause a
Stack
widget must have at least one item which can have a static size at build time -
Zeynal almost 4 yearsI also had to add overflow: Overflow.visible to Stack, to make the item visible.
-
Guilherme Matuella over 3 years@MazinIbrahim that is not true. Just read
RenderStack
documentation. I will copy the part that is relevant in relation to your statement:[...] If there are no non-positioned children, the stack becomes as large as possible [...]
.