Flutter Web页面宽度无法小于500px，如何解除该限制？

CupertinoApp默认遵循iOS设计规范，会给页面内容添加最小宽度约束（通常为320px），这就是页面无法无限缩窄的原因——并非Container本身有最小宽度，而是上层布局的约束限制了它。

要打破这个限制，最简单的方式是用UnconstrainedBox包裹页面内容，移除父级传递的约束：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: UnconstrainedBox(
        child: Container(
          color: CupertinoColors.systemRed,
          width: double.infinity, // 可选：让容器占满可用宽度，无此设置则容器会根据内容自适应
        ),
      ),
    );
  }
}

补充说明 #

• UnconstrainedBox会完全移除父级的约束，让子Widget可以自由调整大小，不再受最小宽度限制。
• 如果需要保留部分约束（比如最大宽度），可以改用ConstrainedBox自定义约束，例如：

  ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 0, // 强制最小宽度为0
      maxWidth: double.infinity,
    ),
    child: Container(color: CupertinoColors.systemRed),
  )
  

内容的提问来源于stack exchange，提问作者John Liu