Flutter中使用SystemChrome设置系统导航栏透明时显示灰色如何解决

问题原因 #

• Android 10（API 29）新增了导航栏对比度强制校验机制，默认属性android:enforceNavigationBarContrast为true，系统会自动给透明导航栏叠加一层灰色半透明遮罩，保证导航按钮和背景的对比度，所以你设置的透明色会被灰色遮罩覆盖。
• 未配置App内容延伸到导航栏区域，即便导航栏本身透明，下方没有页面内容填充时，系统也会默认填充灰色背景。
• 低版本Flutter的SystemUiOverlayStyle缺少禁用导航栏对比度强制的参数，仅设置颜色达不到预期效果。

解决步骤 #

1. 修改安卓原生主题配置 #

打开路径android/app/src/main/res/values-v29/styles.xml（如果没有该文件就新建），在你的App主题节点下新增以下属性：

<style name="NormalTheme" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- 原有其他配置 -->
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:enforceNavigationBarContrast">false</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

2. 调整Flutter端系统UI配置 #

修改你原来的SystemChrome配置，补充禁用对比度强制的参数：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: Colors.transparent,
  // 禁用系统强制对比度遮罩
  systemNavigationBarContrastEnforced: false,
  systemStatusBarContrastEnforced: false,
  // 可根据页面背景色调整导航栏图标亮度，浅色背景用dark，深色背景用light
  systemNavigationBarIconBrightness: Brightness.dark,
  statusBarIconBrightness: Brightness.dark,
));

3. 允许页面内容延伸到导航栏下方 #

在你页面的Scaffold中添加extendBody属性，让页面内容填充导航栏区域：

Scaffold(
  extendBody: true,
  // 如果用到了AppBar，还要添加extendBodyBehindAppBar: true
  extendBodyBehindAppBar: true,
  body: 你的页面内容组件,
)

注意事项 #

如果你使用的Flutter版本低于2.10，SystemUiOverlayStyle不存在systemNavigationBarContrastEnforced属性，需要升级Flutter到2.10及以上稳定版本，或者使用第三方插件flutter_statusbarcolor_ns完成配置。

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