How to create 3 responsive AspectRatios with static padding side by side

Question

I want to create something like the image below, the problem I have is I don't know which aspect ratio should I use for the parent container to make it perfectly responsive when the width gets changed. I tried so many aspect ratios like 1200.0 / 451.0 but it gets overflowed (depends on the window width sometimes 2px and sometimes 3.7px). when I use something like 1080.0 / 403.0 it's getting smaller than full width.

  Widget buildWidget() {
    return Container(
      child: AspectRatio(
        aspectRatio: 1200.0 / 451.0,
        child: Row(
          children: [
            AspectRatio(
              aspectRatio: 16.0 / 9.0,
              child: Container(
                decoration: BoxDecoration(
                  color: AppColors.black,
                  borderRadius:
                  BorderRadius.circular(context.cornerRadiusNormal),
                ),
              ),
            ),
            SizedBox(width: context.basePadding),
            Column(
              children: [
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Container(
                      decoration: BoxDecoration(
                        color: AppColors.black,
                        borderRadius: BorderRadius.circular(
                            context.cornerRadiusNormal),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: context.basePadding),
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Container(
                      decoration: BoxDecoration(
                        color: AppColors.black,
                        borderRadius: BorderRadius.circular(
                            context.cornerRadiusNormal),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  });
  }

Answer 1

Thanks to pskink, after setting the aspect ratio to 24 / 9 it works perfectly and for the padding, I do this in the code below:

  Widget buildWidget() {
    return Container(
      child: AspectRatio(
        aspectRatio: 24 / 9,
        child: Row(
          children: [
            AspectRatio(
              aspectRatio: 16.0 / 9.0,
              child: Padding(
                padding: EdgeInsets.only(
                  left: context.basePadding / 2,
                  top: context.basePadding / 2,
                  right: context.basePadding,
                  bottom: context.basePadding / 2,
                ),
                child: AspectRatio(
                  aspectRatio: 16.0 / 9.0,
                  child: Container(
                    decoration: BoxDecoration(
                      color: AppColors.black,
                      borderRadius:
                      BorderRadius.circular(context.cornerRadiusNormal),
                    ),
                  ),
                ),
              ),
            ),
            Column(
              children: [
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Padding(
                      padding: EdgeInsets.only(
                        left: context.basePadding,
                        top: context.basePadding / 2,
                        right: context.basePadding / 2,
                        bottom: context.basePadding / 2,
                      ),
                      child: AspectRatio(
                        aspectRatio: 16.0 / 9.0,
                        child: Container(
                          decoration: BoxDecoration(
                            color: AppColors.black,
                            borderRadius:
                            BorderRadius.circular(context.cornerRadiusNormal),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: AspectRatio(
                    aspectRatio: 16.0 / 9.0,
                    child: Padding(
                      padding: EdgeInsets.only(
                        left: context.basePadding,
                        top: context.basePadding / 2,
                        right: context.basePadding / 2,
                        bottom: context.basePadding / 2,
                      ),
                      child: AspectRatio(
                        aspectRatio: 16.0 / 9.0,
                        child: Container(
                          decoration: BoxDecoration(
                            color: AppColors.black,
                            borderRadius:
                            BorderRadius.circular(context.cornerRadiusNormal),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }