flutter admob/webview showing blank page after app resume from background

Question

BannerAd showings blank black page after the application is restored from the background. As far as I know, google_mobile_ads is using webview_flutter package in flutter. As expected, the same problem occurs with the webview when restored from the background. All functionality in admob/webview (like clicking or scrolling) works fine, it just renders black blank. Even if I build a new project with only a ad, the problem still exists.

The code below contains just one simple BannerAd that showings a blank page after the application is restored from the background. (in flutter 3.16.3 / Pixel 7 Pro)

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main(){
    runApp(MaterialApp(home:AD()));
}

class AD extends StatefulWidget{
    @override
    State createState()=>_AD();
}
class _AD extends State<AD>{
    BannerAd?_ADBANNER;
    final ValueNotifier<bool>_READY=ValueNotifier<bool>(false);

    @override
    void initState(){
        super.initState();
        MobileAds.instance.initialize();
        if(null==_ADBANNER)
        _ADBANNER=
        BannerAd(
            adUnitId:'ca-app-pub-3940256099942544/6300978111',
            size:AdSize.banner,
            request:AdRequest(),
            listener:BannerAdListener(
                onAdLoaded:(AD){
                    debugPrint('Ad loaded');
                    if(!_READY.value)
                    _READY.value=true;
                },
                onAdFailedToLoad:(AD,E){
                    debugPrint('Ad failed to load: $E');
                    _READY.value=false;
                    AD.dispose();
                },
            ),
        )
        ..load();
    }

    @override
    void dispose(){
        _READY.value=false;
        _ADBANNER?.dispose();
        debugPrint('Ad disposed');
        super.dispose();
    }

    @override
    Widget build(CTX){
        return
        ValueListenableBuilder<bool>(
            valueListenable:_READY,
            builder:(CTX,V,_){
                debugPrint('LISTEN');

                if(V)
                return
                Container(
                    alignment:Alignment.center,
                    color:Colors.white,
                    child:
                    AdWidget(ad:_ADBANNER!),
                );

                else
                return
                Center(child:CircularProgressIndicator());
            }
        );
    }
}

what am I missing in this code??

PS: This is only happen in my pixel 7 pro and mi a1 phone, not in emulator, and no error in debug console at all. I tried using bannerAds and webview at the same time, when slivergrid comes into the viewport, bannerAds shows crazy display errors, duplicating the webview screen.

Answer 1

For the record :

• This issue was identified on Flutter's Github. It impacts Samsung and Pixels phones
• A bugfix was developed on Flutter's engine in this commit and should be part of one of the next releases (probably Flutter 3.20)

So if you ever encounter this issue in the future, please upgrade your Flutter's version first