Flutter: Place 2 sized Containers in the middle of a column in a row

June 29, 2023

I have 2 containers with width and height set to them and a background color (basically a small box). I want to put those 2 containers in the middle or a parent container, on the same row divided to 2 columns in the middle of each column.

I know it sounds confusing. It really isn’t. This is what I want to achieve:

Having the 2 yellow containers in the middle of an imaginary column that takes half the width of the container.

This is my row containing the 2 yellow boxes:

Row(
    children: [
      SwitchPreviewButton(),
      
      SwitchPreviewButton(),
    ],
  );

And this is the yellow box widget:

Widget build(BuildContext context) {
    double width = 10.22;
    double height = 17.32;

    return Container(
      constraints: BoxConstraints(maxWidth: width, maxHeight: height),
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.yellow, //const Color(0xFFB0B0B0),
        borderRadius: BorderRadius.circular(1.16)
      ),
    );
  }

And this is what I get:

If I try to use Expand and center the Yellow widget takes 100% of available space.

How can I achieve that?

>Solution :

add this to your row

Row(
 mainAxisAlignment: MainAxisAlignment.spaceAround,  //<---- ADD THIS
    children: [
      SwitchPreviewButton(),
      
      SwitchPreviewButton(),
    ],
  );