Saturday 12 December 2020

Flutter Admob Interstitial Ad overwrites system bottom navigation bar color to white

I have admob in my flutter app. My system bottom navigation color is set to a custom color by the following flutter code:

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),
          ),
        ),
      ),
    );

In my page I use:

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,
      ),

Here is how I show interstitial ad:

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(); 

The ad shows fine. I get the test ad.

My problem is for some reason, whenever an ad is shown it overwrites my system bottom navigation color to white which makes it seem odd and ruins the continuity of my apps style. Here is what happens:

enter image description here

As you can see the system bottom navigation is overwritten to white. This looks odd. I want to keep my apps custom color that I set with the flutter code while showing interstitial. Is this possible? Why is the system bottom navigation bar color overwritten?

Here is my manifest file:

<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...


from Flutter Admob Interstitial Ad overwrites system bottom navigation bar color to white

No comments:

Post a Comment