Flutter中Android系统导航栏无法透明问题排查求助

可能的原因 #

• EdgeToEdge模式的默认遮罩干扰
  使用SystemUiMode.edgeToEdge时，Android系统会自动给导航栏添加半透明背景遮罩（多为浅色），用于保证图标可读性，这会直接覆盖你设置的systemNavigationBarColor: Colors.transparent，导致导航栏呈现白色。

• 页面内容未延伸至导航栏下方
  即使设置了透明，若Flutter页面的根布局背景为白色，且内容没有延伸到导航栏区域，透过透明导航栏看到的就是页面白色背景，会误以为导航栏本身是白色。

• Android定制ROM的限制
  部分Android 12+的定制ROM（如小米、华为等）对系统UI样式有自定义默认规则，可能会忽略Flutter的SystemUiOverlayStyle配置，强制保留导航栏背景色。

对应的解决方法 #

• 关闭系统强制对比度遮罩
  在设置SystemUiMode.edgeToEdge后，添加systemNavigationBarContrastEnforced: false来关闭系统默认的遮罩：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarColor: Colors.transparent,
  systemNavigationBarIconBrightness: Brightness.dark,
  systemNavigationBarContrastEnforced: false, // 关键配置
));

• 让页面内容覆盖导航栏区域
  通过MediaQuery移除导航栏的默认内边距，并设置根布局背景色与你的NavigationBar一致：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: MediaQuery.removePadding(
      context: context,
      removeBottom: true,
      child: Container(
        color: Colors.blue, // 与NavigationBar同色
        child: Column(
          children: [
            // 页面内容
            Expanded(child: YourPageContent()),
            // 自定义NavigationBar
            YourNavigationBar(),
          ],
        ),
      ),
    ),
  );
}

• 针对定制ROM的原生配置
  如果是ROM限制问题，可在Android项目的android/app/src/main/res/values/styles.xml中添加以下配置：

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:enforceNavigationBarContrast">false</item>
</style>

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