Flutter应用界面遮挡iPhone状态栏导致系统图标显示异常如何修复？

问题原因 #

你仅给Scaffold的body属性包裹了SafeArea，但外层的Container无布局约束会默认撑满整个屏幕，连带Scaffold也会延伸到状态栏区域，Scaffold的背景直接覆盖在状态栏下方，就会导致系统状态栏的时钟、电量等图标显示透明度异常。

修复方案 #

方案1（推荐）：移除多余的外层Container #

Scaffold本身是Flutter标准的页面骨架组件，不需要额外套一层Container，移除后自带的布局适配就会生效，结合body的SafeArea即可正常显示状态栏：

return Scaffold(
  bottomNavigationBar: buildUnAuthenticatedBottomNavigationBar(context),
  body: SafeArea(child: unAuthenticatedScreens[selectedIndex]),
);

方案2：保留Container的话，给外层也套上SafeArea #

如果确实需要保留外层Container做自定义样式，给Container外层也包裹一层SafeArea，让页面内容避开状态栏区域：

return SafeArea(
  child: Container(
    child: Scaffold(
      bottomNavigationBar: buildUnAuthenticatedBottomNavigationBar(context),
      body: SafeArea(child: unAuthenticatedScreens[selectedIndex]),
    ),
  ),
);

方案3：自定义状态栏样式 #

如果需要状态栏背景透明或者调整图标颜色，可以主动配置系统UI样式，先导入services包：

import 'package:flutter/services.dart';

再在页面的initState生命周期中添加配置：

@override
void initState() {
  super.initState();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    // 状态栏图标文字颜色，Brightness.light为白色，Brightness.dark为黑色
    statusBarIconBrightness: Brightness.dark,
  ));
}

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