Flutter - Positioned Widget in Stack causing Exception

Question

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();
}

You cannot only have Positioned widgets as your children of stack widget. You have to have at least one none-positioned widgets. — dshukertjr, Feb 10 '19 at 23:31

score 22 · Accepted Answer · answered Feb 11 '19 at 05:18

22

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]),
   ]
  );
 }

answered Feb 11 '19 at 05:18

Mazin Ibrahim

7,433
2
33
40

3

because a `Stack` widget must have at least one item which can have a static size at build time – Mazin Ibrahim Feb 27 '19 at 08:33
2

I also had to add overflow: Overflow.visible to Stack, to make the item visible. – Zeynal Aug 05 '20 at 12:36
1

@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 [...]`. – Guilherme Matuella Sep 14 '20 at 19:38

score 4 · Answer 2 · answered Jun 26 '21 at 18:20

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'))
  ]),

score 2 · Answer 3 · answered Oct 11 '22 at 03:07

Since this is still an issue. I also came across another option.

You can wrap your stack in an IntrinsicHeight widget as well.

IntrinsicHeight(
    child: 
        Stack( 
            children: [Positioned(top: 10, left: 10, child:Text('My child')
        )]
    ),
),

Flutter - Positioned Widget in Stack causing Exception

3 Answers3

Linked