CODEWITHSUNDEEP
dartflutter
GoldenJoe
GoldenJoe

Reputation: 8002

How to have a Stack widget constrain itself to a Positioned child in Flutter?

In this code, I try to draw a Text widget within a Stack widget. However, Stack widgets do not size themselves to positioned widgets, so the text gets cut off.

How can the text be positioned while still contributing to the Stack's size?

return Column(
  children: <Widget>[
    Stack(
      children: <Widget>[
        Container(height:20, width: 20, color: Colors.green,),
        Positioned(
          top: 10,
          child: Text('Does not render because the stack is only 20x20'),
        )
      ],
    ),
    Container(height:40, width: 40, color: Colors.red,)
  ],
);

Upvotes: 7

Views: 16509

Answers (2)

Rahman Rezaee
Rahman Rezaee

Reputation: 2165

The Overflow property was deprecated so now use this property:

 clipBehavior: Clip.none,

Example:

return Column(
  children: <Widget>[
    Stack(
      clipBehavior: Clip.none,
      children: <Widget>[
        Container(height:20, width: 20, color: Colors.green,),
        Positioned(
          top: 10,
          child: Text('Does not render because the stack is only 20x20'),
        )
      ],
    ),
    Container(height:40, width: 40, color: Colors.red,)
  ],
);

Upvotes: 15

Raja Jain
Raja Jain

Reputation: 169

As mentioned in the documentation "The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment (which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left environments).", So we can't constraint stack itself to positioned widgets. But I think setting overflow to Overflow.visible will work for you.

return Column(
  children: <Widget>[
    Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(height:20, width: 20, color: Colors.green,),
        Positioned(
          top: 10,
          child: Text('Does not render because the stack is only 20x20'),
        )
      ],
    ),
    Container(height:40, width: 40, color: Colors.red,)
  ],
);

Upvotes: 10

Related Questions