What is the best way to put red frame above green container flutter

Question

Hallo, as example displayed, I would like to put a red frame container above the green container, currently I'm using Stack as following code:

Stack(
                children: [
                  Positioned(
                    top: 20,
                    bottom: 20,
                    left: 20,
                    right: 20,
                    child: Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          greenContainer,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Positioned.fill(
                    child: Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage(
                            redContainerFrame,
                          ),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                ],
              ),

But I am afraid, since the page is responsive, so the size of green container and red frame could become really big, and current solution is not a good one, or I need to detect the screen size and setState the Positioned size? Or Flutter has a better idea that I dont know, thank you in advance for any clue!

======================== Update ========================

sorry I made my question not clear, I dont mean to add just a red frame or border like above red one, actually it will be like following frame/ an Image:

so actually it will be such png picture above anther png picture, and this part confuses me how to coordinate

Answer 1

You could put the Stack in a SizedBox and give the SizedBox the dimensions of your frame. Then the Center widget can be used as child of the Stack to position another picture in the middle.

SizedBox(
  height: height of frame,
  width: width of frame,
  child: Stack(
    children: [
      Image.network(
        "link to frame image",
      ),
      Center(
        child: Image.network(
          "link to center image",
          width: define with or height to be sure its smaller than the frame image,
        ),
      ),
    ],
  ),