ThemeMode.dark在Android系统导航栏不生效问题求助

算力阿峰

2026-6-19

Flutter强制深色主题后Android系统导航栏仍显浅色的解决办法

你已经通过以下代码给应用强制开启了深色主题，iOS端运行正常，但Android端的系统导航栏还保持着浅色状态：

darkTheme: ThemeData(
  brightness: Brightness.dark,
  useMaterial3: true,
  colorSchemeSeed: colorSeed,
),
// Always dark mode.
themeMode: ThemeMode.dark,

Android端的问题表现如图：
Android端浅色系统导航栏截图

这是因为Flutter的ThemeData默认不会自动同步Android系统导航栏的样式，需要额外配置：

两种可行的解决方式

1. 在ThemeData中直接配置导航栏样式

针对Material 3，直接在darkTheme里添加navigationBarTheme，指定深色背景和浅色图标文字：

darkTheme: ThemeData(
  brightness: Brightness.dark,
  useMaterial3: true,
  colorSchemeSeed: colorSeed,
  // 配置Android系统导航栏
  navigationBarTheme: NavigationBarThemeData(
    backgroundColor: Colors.black,
    iconTheme: MaterialStateProperty.all(IconThemeData(color: Colors.white)),
    labelTextStyle: MaterialStateProperty.all(TextStyle(color: Colors.white)),
  ),
  // 兼容旧版Material或系统状态栏
  appBarTheme: AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.black,
      systemNavigationBarIconBrightness: Brightness.light,
    ),
  ),
),
themeMode: ThemeMode.dark,

2. 初始化时用SystemChrome强制设置

在应用启动时直接通过SystemChrome设置导航栏样式，一劳永逸：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 强制Android导航栏为深色背景+浅色图标
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.black,
    systemNavigationBarIconBrightness: Brightness.light,
  ));
  runApp(const MyApp());
}