[Android]The WebView flickers when the advertisement is refreshed.

[yo1106]

Plugin Version

flutter: 3.19.2 google_mobile_ads: 4.0.0 webview_flutter: 4.7.0

platform is android.

Steps to Reproduce

1. WebView and AdMobBanner setup same widget.
2. Reload AdMobBanner.

class WebViewWithAd extends StatefulWidget {
  @override
  _WebViewWithAdState createState() => _WebViewWithAdState();
}

class _WebViewWithAdState extends State<WebViewWithAd> {
  late BannerAd _bannerAd;
  bool _isBannerAdReady = false;
  final WebViewController _controllerWeb1 = WebViewController();
  final WebViewController _controllerWeb2 = WebViewController();

  @override
  void initState() {
    super.initState();
    _reloadAd();
  }

  @override
  void dispose() {
    _bannerAd.dispose();
    super.dispose();
  }

  void _reloadAd() {
    setState(() {
      _isBannerAdReady = false;
      _bannerAd = BannerAd(
        adUnitId: 'ca-app-pub-3940256099942544/6300978111',
        size: AdSize.banner,
        request: AdRequest(),
        listener: BannerAdListener(
          onAdLoaded: (_) {
            setState(() {
              _isBannerAdReady = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            print('Failed to load a banner ad: ${error.message}');
            _isBannerAdReady = false;
            ad.dispose();
          },
        ),
      )..load();
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('WebView + BannerAd'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: WebViewWidget(
                controller: _controllerWeb1,
              ),
            ),
            // It doesn't happen if you comment in here
            // Expanded(
            //   child: WebViewWidget(
            //     controller: _controllerWeb2,
            //   ),
            // ),
            if (_isBannerAdReady)
              Container(
                height: _bannerAd.size.height.toDouble(),
                width: _bannerAd.size.width.toDouble(),
                child: AdWidget(ad: _bannerAd),
              ),
            ElevatedButton(
              onPressed: _reloadAd,
              child: Text('Reload Ad'),
            ),
          ],
        ),
      ),
    );
  }
}

[palicka]

same here, in my case it's not webview but google map, but it behaves the same - after the banner ad at the bottom is loaded, for tiny period of time google map widget is replaced with super-stretched ad banner as shown in the video above. Sometimes whole ad is displayed like this, sometimes only the "test ad" label, and sometimes it just flickers without anything displayed

flutter: 3.19.1 google_mobile_ads: 4.0.0 google_maps_flutter: 2.5.3 affected platform: android only

[malandr2]

Hey @yo1106, thanks for sharing the sample code. I can also reproduce this. I have escalated this to the Flutter engineering team to take a closer look.

[palicka]

any updates ?

[malandr2]

Hi @palicka no update to share at this time as the team has been addressing p1 issues and the triage process is still ongoing.

[LTPhantom]

Hello @yo1106, @palicka and anyone affected by this.

After taking a look and some debugging, it seems that the problem is related to the way Web Views are populated by Flutter. I modified the sample code given by @yo1106 to remove all ads related code and only use WebViewWidgets and I get the same results.

I opened an issue on the Flutter GitHub. You can follow progress and get more details on what I did there: https://github.com/flutter/flutter/issues/148991

[malandr2]

Closing this issue out as confirmed in https://github.com/flutter/flutter/issues/148991 it can be replicated without ads. Will reopen if necessary but please follow the Flutter issue for next steps.