Flutter Admob插屏广告覆盖系统底部导航栏颜色问题求助

当然可行！我来帮你拆解问题原因和解决办法：

为什么导航栏颜色会被覆盖？ #

Admob的插屏广告（尤其是你设置了AnchorType.bottom锚定在底部的情况）本质是原生平台的视图控件，并非Flutter Widget树的一部分。当广告展示时，Admob SDK会自动调整系统导航栏的样式——这是为了保证广告内容的可读性（比如避免广告文字和导航栏颜色冲突），所以它会强制覆盖Flutter层通过AnnotatedRegion设置的导航栏样式，把背景改成白色就是常见的默认调整之一。

解决办法：监听广告生命周期，手动恢复/重置导航栏样式 #

我们可以通过监听Admob广告的MobileAdEvent事件，在广告打开时保存当前导航栏样式，广告关闭后再恢复；或者直接在广告打开时强制重新设置我们的自定义样式，确保Flutter的设置优先级更高。

具体代码修改示例 #

首先确保导入services.dart：

import 'package:flutter/services.dart';

然后修改你的插屏广告初始化代码，添加事件监听逻辑：

// 用于保存广告打开前的导航栏样式
SystemUiOverlayStyle? _savedOverlayStyle;

InterstitialAd interstitial = InterstitialAd(
  adUnitId: InterstitialAd.testAdUnitId,
  targetingInfo: MobileAdTargetingInfo(
    testDevices: ["MY_SECRET_PHONE_ID"],
  ),
  listener: (MobileAdEvent event) async {
    switch (event) {
      case MobileAdEvent.loaded:
        interstitial
            .show(
              anchorType: AnchorType.bottom,
              anchorOffset: 0.0,
              horizontalCenterOffset: 0.0,
            )
            .catchError((e) {
          print(e);
          // 广告展示失败时也要恢复样式
          _restoreNavigationBarStyle(context);
        });
        break;
      case MobileAdEvent.opened:
        // 保存当前导航栏样式
        _savedOverlayStyle = SystemUiOverlayStyle.of(context);
        // 强制重新设置我们的自定义导航栏样式
        _setCustomNavigationBarStyle(context);
        break;
      case MobileAdEvent.closed:
      case MobileAdEvent.failedToLoad:
      case MobileAdEvent.leftApplication:
        // 任何广告结束/失败的场景都恢复样式
        _restoreNavigationBarStyle(context);
        break;
      default:
        break;
    }
  });
interstitial.load();

// 封装自定义导航栏样式设置方法
void _setCustomNavigationBarStyle(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark,
    statusBarColor: Theme.of(context).colorScheme.surface,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Theme.of(context).colorScheme.surface,
    systemNavigationBarIconBrightness: Brightness.light,
    systemNavigationBarDividerColor: Theme.of(context).colorScheme.surface,
  ));
}

// 封装样式恢复方法
void _restoreNavigationBarStyle(BuildContext context) {
  if (_savedOverlayStyle != null) {
    SystemChrome.setSystemUIOverlayStyle(_savedOverlayStyle!);
    _savedOverlayStyle = null;
  } else {
    // 如果没有保存的样式，直接重新设置自定义样式
    _setCustomNavigationBarStyle(context);
  }
}

为什么这个方法有效？ #

SystemChrome.setSystemUIOverlayStyle是直接调用原生API设置系统UI样式，优先级比AnnotatedRegion更高——因为AnnotatedRegion是通过Widget树传递样式，而广告是原生视图，会绕过Widget树的设置。通过在广告打开时强制调用这个方法，我们可以把导航栏样式重新拉回我们想要的状态；广告关闭后再恢复之前的样式（或者直接重置自定义样式），就能保证应用风格的连贯性。

额外注意事项 #

• 确保在所有广告相关的结束事件（closed、failedToLoad等）都触发样式恢复，避免出现导航栏样式异常的情况。
• 如果你的应用在不同页面有不同的导航栏样式，_savedOverlayStyle的保存和恢复逻辑能帮你准确回到当前页面的样式，而不是统一设置成一个固定样式。

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