Flutter中WebView页面导航栏颜色设置不生效问题

启动时全局配置的SystemChrome样式在WebView页面失效，核心原因是WebView组件加载时会接管部分系统UI交互逻辑，覆盖全局的导航栏样式配置。以下是两种可行的解决方案：

方案1：利用页面生命周期临时修改样式 #

在WebView页面的初始化阶段替换导航栏颜色，页面销毁时恢复全局配置：

@override
void initState() {
  super.initState();
  // 切换到WebView时设置导航栏为surfaceContainer颜色
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.surfaceContainer,
    systemNavigationBarContrastEnforced: false,
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ));
}

@override
void dispose() {
  // 退出WebView时恢复全局透明样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarContrastEnforced: false,
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ));
  super.dispose();
}

方案2：用AnnotatedRegion局部覆盖样式 #

通过AnnotatedRegion组件包裹WebView，直接为该页面区域单独设置系统UI样式，无需手动处理生命周期恢复：

AnnotatedRegion<SystemUiOverlayStyle>(
  value: const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.surfaceContainer,
    systemNavigationBarContrastEnforced: false,
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ),
  child: WebView(
    initialUrl: '你的网页地址',
    // 其他WebView相关配置
  ),
)

两种方案对比：方案1适合需要严格区分全局与页面样式切换的场景；方案2更符合Flutter Widget树的管理逻辑，代码更简洁。

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