10

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();
}
1
  • 3
    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, 2019 at 23:31

3 Answers 3

20

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]),
   ]
  );
 }
3
  • 3
    because a Stack widget must have at least one item which can have a static size at build time Feb 27, 2019 at 8:33
  • 2
    I also had to add overflow: Overflow.visible to Stack, to make the item visible.
    – Zeynal
    Aug 5, 2020 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 [...]. Sep 14, 2020 at 19:38
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'))
  ]),
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.