How can I get the Positioned widget to work in a Stack (flutter)?

Question

Is something wrong with this snippet? The positioned element isn't showing up but the others are. deviceHeight is defined elsewhere as the height of the device.

The first container holds the other two containers under it. The second container appears at the top correctly, but the third one (positioned) which should be under the second one doesn't appear. Welcome to hear any alternatives.

Align(
    alignment: Alignment.bottomCenter,
    child: Stack(children: <Widget>[
      Container(
        color: Color(bgDark),
        height: deviceHeight / 100 * 40,
      ),
      Container(color: Colors.red, height: deviceHeight / 18),
      Positioned(
          top: 50,
          child: Container(
              color: Colors.green, height: deviceHeight / 1))
    ]))

Adding a `width` to the `Positioned` `Container` made it visible. I assumed random `height` and `width` values for example answer given below. — dev-aentgs, Jun 20 '20 at 09:32

score 3 · Answer 1 · answered Jun 20 '20 at 09:30

Adding a width to the Positioned Container made it visible.

Align(
      alignment: Alignment.bottomCenter,
      child: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 300,
          ),
          Container(
            color: Colors.red,
            height: 200,
          ),
          Positioned(
            top: 50,
            child: Container(
              color: Colors.green,
              height: 100,
              width:100,
            ),
          ),
        ],
      ),
    );

I am not sure about the exact cause of the issue but it seems Positioned needed both height and width dimensions.

How can I get the Positioned widget to work in a Stack (flutter)?

1 Answers1