Flutter中如何在Edge-to-Edge模式下移除Android导航栏深色背景？

要让Flutter应用的Android导航栏像Google Play、Gmail那样完全透明，和应用界面无缝融合，可按以下步骤操作：

1. 启用Edge-to-Edge模式 #

首先确保应用开启Edge-to-Edge，让页面内容延伸到系统栏下方：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 启用Edge-to-Edge模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const MyApp());
}

2. 设置导航栏透明样式 #

通过SystemUiOverlayStyle将导航栏背景设为透明，并根据应用背景调整图标亮度（保证图标可读性）：

MaterialApp(
  builder: (context, child) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      // 导航栏完全透明
      systemNavigationBarColor: Colors.transparent,
      // 导航栏图标颜色：浅色背景用Brightness.dark，深色背景用Brightness.light
      systemNavigationBarIconBrightness: Brightness.light,
      // 可选：同步设置状态栏透明，保持视觉统一
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
    ));
    return child!;
  },
  home: const MyHomePage(),
);

3. 避免内容被导航栏遮挡（可选） #

如果页面底部内容被导航栏覆盖，可通过MediaQuery获取导航栏高度，添加底部内边距：

Scaffold(
  body: Padding(
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
    child: // 你的页面内容组件
  ),
);

进阶：动态适配不同页面背景 #

若不同页面背景颜色差异大，可在页面的生命周期方法中动态调整导航栏图标样式：

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  void initState() {
    super.initState();
    // 当前页面为浅色背景，设置深色导航栏图标
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
  }

  @override
  void dispose() {
    // 页面销毁时恢复全局默认样式
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarIconBrightness: Brightness.light,
    ));
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.white,
      body: Center(child: Text("浅色背景页面")),
    );
  }
}

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