将整个应用程序放置在一个黑色背景的Container中。设置显示黑色背景图像的特定比例（宽度和高度为MediaQuery.of（context）.size.width/height）

我没有找到解决这个问题的好例子，所以我自己尝试了一些方法。
我发现的最好的解决方案是将MaterialApp或Scaffold本身放入两个容器中。外部容器必须是“背景”容器，它设置背景颜色并将对齐设置为Alignment.center，内部容器必须是受约束的容器，例如constraints: BoxConstraints(maxWidth: 1000)。
这看起来像：

Container(
   color: Colors.black,
   alignment: Alignment.center,
   child: Container(
      constraints: const BoxConstraints(maxWidth: 1000),
      child: MaterialApp(
         (...)
      ),
   ),
),

内盒也可以是ConstrainedBox，这可能会有点更好的可读性：

Container(
   color: Colors.black,
   alignment: Alignment.center,
   child: ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 1000),
      child: MaterialApp(
         (...)
      ),
   ),
),

如果你想页面总是在左上角，你可以改变对齐方式，改变背景颜色，改变最大和最小的宽度和高度，如果是最小的宽度和高度，你就需要在小屏幕上滚动，但这可能已经超出了我们的讨论范围😅

• • 编辑：**在使用MediaQuery.of(context).size...的时候，你必须小心这个解决方案，因为它没有将ConstrainedBox的maxWidth作为设备宽度。因此，我添加了一些帮助函数，我可以使用它们来代替MediaQuery.of(context).size...：

static double screenHeight(BuildContext context) {
   return MediaQuery.of(context).size.height;
}

static double screenWidth(BuildContext context) {
   return MediaQuery.of(context).size.width > 1200
      ? 1200
      : MediaQuery.of(context).size.width;
}

您可以将这些与小部件的构建函数的普通BuildContext一起使用，也可以更改screenHeight函数以包括最小或最大高度检查，如screenWidth。