Flutter Android开发：如何消除状态栏留下的空白区域？

问题原因分析 #

1. 嵌套MaterialApp和GetMaterialApp导致布局层级混乱，产生多余空白区域
2. SystemUiMode.immersiveSticky的配置未让布局延伸到状态栏区域，且未设置系统栏透明，引发空白
3. Scaffold放置在错误层级，进一步干扰全屏布局逻辑

具体解决方案 #

1. 修正系统UI配置

在main函数中调整系统UI模式，启用布局延伸并设置系统栏透明，仅保留状态栏：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  InitialBinding().dependencies();
  await Firebase.initializeApp();
  await FlutterDownloader.initialize();

  // 隐藏导航栏、保留状态栏，允许布局延伸到系统栏区域
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.edgeToEdge,
    overlays: [SystemUiOverlay.top],
  );
  // 设置系统栏透明，让内容填充全屏
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    // 如需状态栏文字深色显示，可添加：statusBarIconBrightness: Brightness.dark
  ));

  runApp(const MyApp());
}

2. 修复根组件结构

移除多余的MaterialApp和Scaffold嵌套，直接用GetMaterialApp作为根组件（GetMaterialApp已封装MaterialApp功能）：

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

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);

    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: AppRoutes.SPLASH_SCREEN.name,
      onGenerateRoute: AppRouteExt.bindingRoute,
      builder: (context, child) {
        // 移除状态栏默认内边距，让内容延伸到状态栏下方
        return MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: child!,
        );
      },
    );
  }
}

3. 确保页面内容占满全屏

在你的页面（如闪屏页）中，使用全屏布局组件确保内容填充整个屏幕：

// 示例闪屏页结构
class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: Container(
        color: Colors.white,
        child: const Center(child: Text("闪屏页")),
      ),
    );
  }
}

关键说明 #

• SystemUiMode.edgeToEdge是Flutter推荐的全屏模式，允许布局延伸到系统栏区域，同时通过overlays控制显示的系统栏
• MediaQuery.removePadding(removeTop: true)会消除状态栏的默认内边距，让页面内容直接覆盖到状态栏下方
• 禁止嵌套MaterialApp和GetMaterialApp，避免布局层级冲突和多余空白

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