时间戳

首页 > 解决方案 > Flutter Admob Interstitial Ad 将系统底部导航栏颜色覆盖为白色

android - Flutter Admob Interstitial Ad 将系统底部导航栏颜色覆盖为白色

问题描述

我的颤振应用程序中有admob。我的系统底部导航颜色通过以下颤振代码设置为自定义颜色：

PlatformApp(
      material: (_, __) => MaterialAppData(
        themeMode: ThemeMode.dark,
        theme: ThemeData(
          splashFactory: InkRipple.splashFactory,
          applyElevationOverlayColor: true,
          accentColor: Color(0xffe22249),
          colorScheme: ColorScheme.dark(
            primary: Color(0xffe22249),
            brightness: Brightness.dark,
            background: Color(0xff090909),
            surface: Color(0xff090909),
            onSurface: Color(0xffffffff),
            onBackground: Color(0xffffffff),
          ),
        ),
      ),
    );

在我的页面中，我使用：

AnnotatedRegion<SystemUiOverlayStyle>(
      value: 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,
      ),

以下是我展示插页式广告的方式：

InterstitialAd interstitial = InterstitialAd(

        adUnitId: InterstitialAd.testAdUnitId,
        targetingInfo: MobileAdTargetingInfo(
          testDevices: ["MY_SECRET_PHONE_ID"],
          
        ),
        listener: (MobileAdEvent event) async {
          if (event == MobileAdEvent.loaded) {
              interstitial
                  .show(
                anchorType: AnchorType.bottom,
                anchorOffset: 0.0,
                horizontalCenterOffset: 0.0,
              )
                  .catchError((e) {
                //TODO: Log error to analytics
                print(e);
              });
     
          } 
        });

    interstitial.load();

广告显示很好。我得到了测试广告。

我的问题是出于某种原因，每当显示广告时，它都会将我的系统底部导航颜色覆盖为白色，这使它看起来很奇怪，并破坏了我的应用程序风格的连续性。这是发生的事情：

在此处输入图像描述

如您所见，系统底部导航被覆盖为白色。这看起来很奇怪。我想在显示插页式广告时保留我使用颤振代码设置的应用程序自定义颜色。这可能吗？为什么系统底部导航栏颜色会被覆盖？

这是我的清单文件：

<application
        android:name="io.flutter.app.FlutterApplication"
        android:icon="@mipmap/ic_launcher">
     
        <activity
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            >
... REST OF MANIFEST IS IRRELEVANT...

标签： androidflutteradmob

解决方案

为此，您可以将边距底部设置为您设置的主布局（Admob 插页式）布局。像这样，

 @override
  Widget build(BuildContext context) {
    return Container(
          margin: const EdgeInsets.only(bottom: 50),
          child: yourAdmobLayout(...)

在此之后，您的 Admob 小部件将边缘留到底部，而不是与底部导航栏重叠。

关于风格的新更新试试这个演示

https://gist.githubusercontent.com/akshatapp/6b6993ed7b7c10063ffb522461134d03/raw/03887b465405943ca58d4ec0d6462416d0db5de0/main.dart

推荐阅读