Flutter Web固定屏幕尺寸：将网页限制为手机大小并留黑边

可以通过在外层添加约束容器实现这个效果，核心是固定内容区域的宽高为你的设计尺寸（390x844），并将其居中显示，剩余区域填充黑色。修改后的代码如下：

Container(
  color: Colors.black, // 剩余区域显示黑色
  child: Center(
    child: ConstrainedBox(
      constraints: const BoxConstraints(
        maxWidth: 390,
        maxHeight: 844,
        minWidth: 390,
        minHeight: 844,
      ), // 固定内容区域为设计尺寸
      child: MediaQuery(
        data: const MediaQueryData(),
        child: MaterialApp(
          home: ScreenUtilInit(
            splitScreenMode: true,
            designSize: const Size(390, 844),
            minTextAdapt: true,
            builder: (context, child) {
              return MainHomePageN();
            },
          ),
        ),
      ),
    ),
  ),
)

关键说明： #

• Container：设置整个页面背景为黑色，覆盖Web端的空白区域
• Center：将固定尺寸的内容区域居中显示
• ConstrainedBox：强制内容区域的宽高严格等于你的设计尺寸，避免Web端自动拉伸

这样修改后，Web端打开时，应用内容会保持手机屏幕的390x844尺寸，左右和上下的剩余空间都会显示黑色，匹配你的设计需求。

内容的提问来源于stack exchange，提问作者Malay Agrawal