如何让 Positioned 小部件在 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))
    ]))

Answer 1

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.