Flutter中设置Android底部系统导航栏透明不生效该如何解决？

问题根因 #

该问题是Android系统版本特性导致：Android 10（API 29）及以上版本默认开启了导航栏对比度强制优化，即使手动设置systemNavigationBarColor为透明，系统也会自动叠加一层半透明灰色遮罩保证导航栏按钮与背景的对比度，而状态栏没有该默认限制，因此透明设置可以正常生效。

原问题现象如下：

解决方案 #

步骤1：Flutter 侧补充SystemUiOverlayStyle配置 #

添加systemNavigationBarContrastEnforced: false关闭系统强制对比度遮罩，同时可搭配systemNavigationBarIconBrightness调整导航栏图标颜色适配页面背景色，注意要先调用WidgetsFlutterBinding.ensureInitialized()确保配置在应用启动前生效，修改后完整代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    // 新增以下两行配置
    systemNavigationBarContrastEnforced: false,
    systemNavigationBarIconBrightness: Brightness.dark, // 可根据背景色调整为Brightness.light
  ));
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const TestApp(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true, // 原有配置正确，保证页面内容延伸到导航栏下方
      backgroundColor: const Color(0xFFE76098),
      body: Container(),
    );
  }
}

步骤2：适配低版本Android系统（API < 29） #

如果需要兼容Android 9及更低版本，需要修改安卓原生主题配置，打开android/app/src/main/res/values/styles.xml，在App主题下添加以下配置：

<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:enforceNavigationBarContrast">false</item>
<item name="android:windowTranslucentNavigation">false</item>

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