Flutter stack with positioned design

Question

i try to desing below picture. I am having trouble because i could not just like it. I use stack and positioned but i dont.

Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
          ),             
          Positioned(
            top: 200, 
            left: 0,
            child: Container(
              width: 180,
              height: 100,
              color: Colors.yellow,
            ),
          ),
        ],
      ),

Answer 1

You can wrap the Stack with SizedBox and provide the summation size. Align seems better to me while we already know the size.

SizedBox(
  width: 200,
  height: 200 + (100.0 / 2),// taking half from yellow box
  child: Stack(
    children: [
      Align(
        alignment: Alignment.topCenter,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: 180,
          height: 100,
          color: Colors.yellow,
        ),
      ),
    ],
  ),
)

And with Positioned widget, it will be

SizedBox(
  width: 200,
  height: 200 + (100.0 / 2),
  child: Stack(
    children: [
      Positioned(
        top: 0,
        left: 0, //not necessary
        right: 0, //not necessary
        child: Container(
          height: 200,
          width: 200,
          color: Colors.red,
        ),
      ),
      Positioned(
        bottom: 0,
        left: 10,
        right: 10,
        child: Container(
          height: 100,
          color: Colors.yellow,
        ),
      ),
    ],
  ),
)