google_mobile_ads SafeArea override

Steps to Reproduce

This one is a bit complicated, not sure if I am doing something wrong or if it is a bug or just how things are supposed to work. I need some help here please!

I have a rewarded ad displayed in my app. This is implemented pretty vanilla way and it does work, the video ad plays across the entire screen. But there are some weird things happening to the application behind the ad which you cannot really see unless you have a phone with a notch (Samsung A20 in my case).

When the ad runs on a phone with a notch, the ad respects the SafeArea and does not cover the top part of the screen which is normally taken by Android status bar. But it seems that the ad affects the application, so application no longer respects SafeArea and it stretches over all the way to the top of the screen. So you can see the sliver of the app behind the ad, in the area where status bar normally is. I mean it is not the end of the world, but it looks ugly.

So in a nutshell, when the ad starts, it changes the way application behind is displayed which you mostly would not notice except if there is a notch (or you use media query to resize things).

Is this normal? Am I doing something wrong? How to avoid this ugly glitch?

Expected results: App is not visible behind the ad

Actual results: Sliver of the app visible around the notch in “unsafe area”

Code sample

Logs

[√] Flutter (Channel beta, 3.3.0-0.5.pre, on Microsoft Windows [Version 10.0.19044.1949], locale en-US)
    • Flutter version 3.3.0-0.5.pre on channel beta at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 096162697a (9 days ago), 2022-08-22 15:34:14 -0700
    • Engine revision ad3d868e0d
    • Dart version 2.18.0 (build 2.18.0-271.7.beta)
    • DevTools version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\dejan\AppData\Local\Android\sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[!] Visual Studio - develop for Windows (Visual Studio Community 2022 17.3.2)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.3.32819.101
    • Windows 10 SDK version 10.0.22000.0
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these
      components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] VS Code (version 1.70.2)
    • VS Code at C:\Users\dejan\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19044.1949]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 98.0.4758.80
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 104.0.1293.70

[√] HTTP Host Availability
    • All required HTTP hosts are available

[darshankawar]

Thanks for the code sample. Using it, I was able to replicate the behavior using Pixel emulator that has a notch.

Maybe similar / related: https://github.com/googleads/googleads-mobile-flutter/issues/191

[sharyer-Ilyas-Khan]

issue can be resolved by adding below line <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> <item name="android:windowBackground">?android:colorBackground</item> in android/app/src/main/res/values/style.xml.