Flutter Web应用如何修改系统导航栏颜色？

你用SystemChrome.setSystemUIOverlayStyle没用是因为这个API只对Flutter原生（Android/iOS）应用生效，Web端完全不吃这套，得用Web专属的方式来修改：

方法一：修改web/index.html的meta标签 #

直接在项目根目录下的web/index.html的<head>区域添加以下meta标签，以此控制状态栏和底部导航栏的颜色：

<!-- 控制Android Chrome的状态栏/导航栏主题色 -->
<meta name="theme-color" content="#1a1a1a">
<!-- iOS Safari：设置状态栏样式，同时开启Web App模式确保样式生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 开启Android的Web App模式 -->
<meta name="mobile-web-app-capable" content="yes">

把content里的颜色值改成你需要的（比如#1a1a1a对应深色），保存后重启Web服务就能看到效果。

方法二：用Flutter动态调用JS修改 #

如果需要在Flutter代码里动态切换导航栏颜色，可以借助dart:js包操作DOM：
默认Flutter Web项目已包含该依赖，直接写以下代码即可：

import 'dart:js' as js;

void setWebNavigationBarColor(String color) {
  // 修改theme-color meta标签
  final metaTheme = js.context['document'].querySelector('meta[name="theme-color"]');
  if (metaTheme != null) {
    metaTheme.setAttribute('content', color);
  }
  // 针对iOS Safari的额外兼容处理
  js.context['webkit']?.callMethod('messageHandlers')?['setNavigationBarColor']?.postMessage(color);
}

之后在main函数或页面初始化时调用：

void main() {
  setWebNavigationBarColor('#1a1a1a');
  runApp(const MyApp());
}

注意事项 #

• 不同浏览器支持有差异：iOS Safari的底部导航栏颜色自定义限制较多，部分版本仅支持设置为透明或跟随系统；Android Chrome的支持相对灵活。
• 若为PWA应用，记得在web/manifest.json里把theme_color也改成对应颜色，否则添加到主屏幕后样式可能会变回默认。

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