Flutter 3.16中systemNavigationBarIconBrightness属性失效问题求助

问题原因 #

你的代码里SystemChrome.setSystemUIOverlayStyle的调用时机不对，会被MaterialApp的默认设置覆盖；另外部分Android系统会根据导航栏颜色的对比度强制调整图标颜色，也会导致设置不生效。

解决方案 #

方案1：在main函数中提前设置 #

把系统UI样式配置放在runApp之前，先初始化Flutter绑定，避免被后续组件覆盖：

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

void main() {
  // 初始化Flutter绑定，确保系统设置生效
  WidgetsFlutterBinding.ensureInitialized();
  // 设置导航栏样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.teal,
    // 设置为Brightness.dark即可显示黑色图标
    systemNavigationBarIconBrightness: Brightness.dark,
  ));
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Demo')),
      body: const Center(child: Text('Hello, Flutter!')),
    );
  }
}

方案2：通过MaterialApp全局主题配置 #

在MaterialApp的theme中设置systemOverlayStyle，全局生效且不会被组件覆盖：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 全局配置系统UI样式
        systemOverlayStyle: const SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.teal,
          systemNavigationBarIconBrightness: Brightness.dark,
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

// MyHomePage代码保持不变

额外注意点 #

• 确保导航栏颜色和图标颜色有足够对比度：比如浅色导航栏（如白色）搭配Brightness.dark图标，深色导航栏搭配Brightness.light图标，部分Android系统会自动修正对比度不足的组合。
• Android 8.0（API 26）及以上版本才支持自定义导航栏图标颜色，低版本系统无法修改。

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