如何在Flutter应用中修改底部Overview栏颜色（保留SafeArea）

你要修改的是**安卓系统底部导航栏（含主页、返回按钮的那栏）**的颜色，通过调整SystemUiOverlayStyle的相关属性即可实现，且完全不需要移除SafeArea组件。

具体修改方案 #

方案1：页面局部配置（仅当前Home页面生效） #

在home.dart的AnnotatedRegion组件中，替换原有的SystemUiOverlayStyle.light为自定义样式，明确设置底部导航栏的背景色和图标亮度：

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    // 顶部状态栏配置（可选，根据你的UI需求调整）
    statusBarColor: Colors.transparent, // 状态栏背景透明，与页面背景融合
    statusBarIconBrightness: Brightness.dark, // 状态栏图标设为深色，适配浅色页面背景
    // 底部导航栏核心配置
    navigationBarColor: Colors.white, // 设置底部导航栏背景为白色
    navigationBarIconBrightness: Brightness.dark, // 导航栏图标设为深色，确保在白色背景上清晰可见
    navigationBarDividerColor: Colors.transparent, // 可选：移除导航栏与页面之间的分割线
  ),
  child: Scaffold(
    // 原有Scaffold内容保持不变
  ),
)

方案2：全局主题配置（整个应用生效） #

如果希望所有页面的底部导航栏都改为白色，可以在main.dart的ThemeData中添加全局配置：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          scaffoldBackgroundColor: Colors.white,
          textSelectionTheme: const TextSelectionThemeData(
            cursorColor: Color.fromARGB(255, 253, 126, 153),
            selectionColor: Color.fromARGB(255, 253, 126, 153),
            selectionHandleColor: Color.fromARGB(255, 253, 126, 153),
          ),
          // 添加全局系统UI样式配置
          appBarTheme: const AppBarTheme(
            systemOverlayStyle: SystemUiOverlayStyle(
              statusBarColor: Colors.transparent,
              statusBarIconBrightness: Brightness.dark,
              navigationBarColor: Colors.white,
              navigationBarIconBrightness: Brightness.dark,
            ),
          ),
          // Flutter 3.13+版本可直接设置全局systemOverlayStyle（无需依赖AppBar）
          // systemOverlayStyle: const SystemUiOverlayStyle(...),
        ),
        home: Home());
  }
}

关键说明 #

• SafeArea组件会自动适配修改后的系统导航栏，它的作用是确保页面内容不会被系统状态栏/导航栏遮挡，与导航栏颜色设置完全兼容。
• 如果你的页面背景为深色，需将navigationBarIconBrightness改为Brightness.light，保证导航栏图标在深色背景上可见。
• 部分安卓版本可能需要在原生配置文件android/app/src/main/res/values/styles.xml中补充设置，但通过Flutter的SystemUiOverlayStyle配置通常已足够生效。

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