【Flutter】解决小米澎湃系统迷你窗口、缩小窗口后界面空白问题

本篇文章主要讲解Flutter在小米澎湃os系统下迷你缩放后显示空白的bug。
日期：2025年6月15日

报错现象：

迷你窗口后布局错乱且无法显示完整信息布局

解决办法：

在main文件下修改如下代码：

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: Setting.APP_NAME,
      initialRoute: '/',
      builder: (BuildContext context, Widget? child) {
        // 处理 MediaQuery 异常问题，特别是小米澎湃系统
        MediaQueryData mediaQuery = MediaQuery.of(context);
        double safeTop = mediaQuery.padding.top;

        // 如果出现异常值，使用默认值替代
        if (safeTop > 80 || safeTop < 0) {
          print('Detected abnormal top padding: $safeTop, using fallback.');
          safeTop = 24.0; // 合理默认值
        }

        return MediaQuery(
          data: mediaQuery.copyWith(
            padding: mediaQuery.padding.copyWith(top: safeTop),
          ),
          child: child ?? const SizedBox.shrink(),
        );
      },
      routes: {     },
    );
  }
}

解决后效果