如何将Flutter NavigationBar组件颜色同步至Android系统导航栏？

API 探路者

2026-6-24

解决Flutter Material3中NavigationBar与Android系统导航栏颜色不匹配问题

要让Android系统导航栏颜色和Flutter的NavigationBar保持一致，只需两步操作：

1. 配置Material3主题中的NavigationBar样式

在ThemeData里指定NavigationBar的背景色，确保主题层面统一：

ThemeData(
  useMaterial3: true,
  navigationBarTheme: const NavigationBarThemeData(
    backgroundColor: Colors.blueAccent, // 自定义NavigationBar背景色
  ),
)

2. 同步设置Android系统导航栏颜色

通过SystemChrome将系统导航栏颜色设置为和NavigationBar一致，同时调整图标亮度保证可见性：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化时设置系统导航栏样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blueAccent, // 和NavigationBar同色
    systemNavigationBarIconBrightness: Brightness.light, // 亮色图标适配深色背景，反之则设为Brightness.dark
  ));
  runApp(const MyApp());
}

适配动态主题（深色/浅色模式）

如果应用支持主题切换，可在页面的didChangeDependencies方法中动态更新系统导航栏样式：

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final theme = Theme.of(context);
  final brightness = MediaQuery.of(context).platformBrightness;
  
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: theme.navigationBarTheme.backgroundColor ?? theme.colorScheme.surface,
    systemNavigationBarIconBrightness: brightness == Brightness.dark ? Brightness.light : Brightness.dark,
  ));
}