In a Flutter application for Windows, when minimizing the window, some containers overflow. How can I solve this problem?

Question

I am not able to figure out how to minimize this container according to the shape of the window..

In full screen it looks good.full screen

 body: Row(
        children: [
          Container(
            decoration: BoxDecoration(
                border: Border.all(
                  color: Color.fromARGB(255, 255, 255, 255),
                ),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            width: 300,
            height: 623,
          ),
          Spacer(
            flex: 1,
          ),
          Container(
            decoration: BoxDecoration(
                border: Border.all(
                  color: Color.fromARGB(255, 255, 255, 255),
                ),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            width: 1000, //this part may have the problems.
            height: 623,
          ),
        ],
      ),

I was trying to create a UI for a windows application. The UI was working fine when it is in full screen. But in minimized screen it is not working well.

I want the UI to get smaller according to the windows size.

Answer 1

This problem would not be hard to solve if you didnt have a spacer between both containers. You could then use MediaQuery like this:

Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Row(
  children: [
    Container(
      height: size.height,
      width: size.width*0.3,
      color: Colors.blue,
    ),
    Container(
      height: size.height,
      width: size.width*0.7,
      color: Colors.red,
    ),
  ],
);}

But to use this you need to know the proportion of the screen width that each container will need, and the spacer doesn't allow that because you don't know it's width. Instead, you could use a SizedBox, like this:

Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Row(
  children: [
    Container(
      height: size.height,
      width: size.width*0.3,
      color: Colors.blue,
    ),
    SizedBox(
      width: size.width*0.1,
    ),
    Container(
      height: size.height,
      width: size.width*0.6,
      color: Colors.red,
    ),
  ],
);}

Here: blue container occupies 30% of the max width. SizedBox used 10% of max width. Red container occupies 60% of max width. In total, they use 100% of the screen width, and fully adapt to the screen size. This code works, and is a practical alternative in my opinion, because the SizedBox acts like the Spacer. The only difference is that you know exactly what proportion of the screen it will take (in this example, size.width * 0.1 so 10%) , so you can adjust the size of the two other containers (SizedBox uses 10% of width, so the two other containers combined need to use maximum 90% of width, so size.width * 0.9).