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

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!

CodePudding user response：

Try below code:

1st Way using border of container

 Container(
          height: 250,
          width: 150,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.red,
              width: 15,
            ),
          ),
          child: Container(
            height: 250,
            width: 150,
            decoration: const BoxDecoration(
              color: Colors.green,
            ),
          ),
        ),

2nd Way using margin

  Container(
          height: 250,
          width: 150,
          color: Colors.red,
          child: Container(
            margin: const EdgeInsets.all(15),
            color: Colors.green,
          ),
        ),

Result Screen->

CodePudding user response：

I think you can use border from container decoration for red.

Container(
  width: 100,
  height: 300,
  decoration: BoxDecoration(
      color: Colors.green,
      border: Border.all(
        width: 12, //red frame
        color: Colors.red,
      )),
)

More about Container and BoxDecoration