Flutter Web如何在窗口高度小于500px时为所有页面显示空白屏？

要让所有页面都实现浏览器高度较小时显示空白屏的效果，你可以通过全局包裹组件+自动监听窗口尺寸变化来实现，无需在每个路由里重复写判断逻辑。具体操作如下：

1. 封装全局高度判断组件 #

创建一个可复用的组件，统一处理高度判断逻辑，窗口尺寸变化时会自动触发重新计算：

class ScreenHeightWrapper extends StatelessWidget {
  final Widget child;
  // 高度阈值，对应你原判断条件里的临界值
  final double heightThreshold;

  const ScreenHeightWrapper({
    super.key,
    required this.child,
    this.heightThreshold = 5,
  });

  @override
  Widget build(BuildContext context) {
    // 自动监听当前窗口高度，窗口变化时会触发组件重绘
    final calculatedHeight = setHeight(context, 0.01);

    if (kIsWeb && calculatedHeight <= heightThreshold) {
      return const EmptyScreen();
    }
    return child;
  }

  // 保留你原有的setHeight计算逻辑
  double setHeight(BuildContext context, double value) {
    return MediaQuery.of(context).size.height * value;
  }
}

2. 修改MaterialApp，全局应用判断逻辑 #

利用MaterialApp的builder属性，给所有路由页面加上这个高度判断包裹，不管跳转到哪个页面都会生效：

class _ExcelitState extends State<Excelit> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      key: navigatorKey,
      debugShowCheckedModeBanner: false,
      // 全局builder，所有页面都会被ScreenHeightWrapper包裹
      builder: (context, child) {
        return ScreenHeightWrapper(child: child!);
      },
      onUnknownRoute: (RouteSettings settings) {
        return MaterialPageRoute<void>(
          settings: settings,
          builder: (BuildContext context) =>
              const Scaffold(body: Center(child: Text('Page Not Found!!!'))),
        );
      },
      routes: {
        '/': (context) => const LoginScreen(),
        // 其他路由直接写对应页面即可，无需重复判断高度
        '/dashboard': (context) => const DashboardScreen(),
        '/settings': (context) => const SettingsScreen(),
      },
    );
  }
}

class EmptyScreen extends StatelessWidget {
  const EmptyScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(backgroundColor: kBackgroundColor,);
  }
}

核心说明 #

• builder属性会自动包裹所有路由页面，包括通过Navigator.push跳转的页面，确保全局生效。
• 借助MediaQuery自动监听窗口尺寸变化，浏览器高度调整时会自动重新计算并切换显示内容，无需手动添加窗口监听事件。
• 原有的setHeight计算逻辑可直接复用，无需修改。

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