How to hide banner ad when navigating to next page in flutter?

Question

I am setting ads in flutter app using firebase_admob plugin. I tried banner ad and it is working fine but, when i navigate to another page it still remains at its position. I want that ad should hide when navigating to another page.

The code snippet is as follows.

BannerAd myBanner = BannerAd(
  // Replace the testAdUnitId with an ad unit id from the AdMob dash.
  // https://developers.google.com/admob/android/test-ads
  // https://developers.google.com/admob/ios/test-ads
  adUnitId: BannerAd.testAdUnitId,
  size: AdSize.smartBanner,
  targetingInfo: targetingInfo,
  listener: (MobileAdEvent event) {
    print("BannerAd event is $event");
  },
);
myBanner
  // typically this happens well before the ad is shown
  ..load()
  ..show(
    // Positions the banner ad 60 pixels from the bottom of the screen
    anchorOffset: 60.0,
    // Banner Position
    anchorType: AnchorType.bottom,
  );

Answer 1

You can use RouteObserver:

class AdmobObserver extends RouteObserver<PageRoute<dynamic>> {

  BannerAd _myBanner = BannerAd(
    adUnitId: BannerAd.testAdUnitId,
    size: AdSize.smartBanner,
    listener: (MobileAdEvent event) {
      print("BannerAd event is $event");
    },
  );

  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);

    if (route.settings.name == '/') {
      // show the banner when navigating to home screen
      _showBannerAd();
    } else {
      // hide the banner when navigating to another screen
      _myBanner.dispose();
    }

  }


  @override
  void didPop(Route route, Route previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute.settings.name == '/') {
      // show the banner again when returning back to the home screen
      _showBannerAd();
    }
  }

  void _showBannerAd() {
    _myBanner
      ..load()
      ..show(
        anchorOffset: 60.0,
        // Banner Position
        anchorType: AnchorType.bottom,
      );
  }
}

Then you need to add this observer to your MaterialApp:

  static AdmobObserver admobObserver = AdmobObserver();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: <NavigatorObserver>[admobObserver],
      .
      .
      .

Answer 2

dispose() will be called when a page is destroyed. So you can distroy banner ad there.

  @override
  void dispose() {

    myBanner.dispose();

    super.dispose();
  }

Answer 3

if you want to hide when show new Screen and re show when user return to last screen, you need to dispose before start new page and use async and await to await until new page pop from navigator, lets show some code

 BannerAd bannerAd;

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

    initAds();
  }   


   void openNewPage() async{
     //hide banner before start new page
     bannerAd?.dispose();
     await Navigator.push(context, MaterialPageRoute(builder: (_) => MySecondScreen()));
     //now user is return to this page so reshow banner
     initAds();
    }


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

    bannerAd?.dispose();
    interstitialAd?.dispose();
  }



  void initAds() async {

      bannerAd = BannerAd(
        adUnitId: kReleaseMode ? Constant.BANNER_AD_ID : BannerAd.testAdUnitId,
        size: AdSize.smartBanner,
        listener: (MobileAdEvent event) {
          print("BannerAd event is $event");
        },
      );

      bannerAd
        // typically this happens well before the ad is shown
        ..load()
        ..show(
          anchorType: AnchorType.bottom,
        );
    

  
  }

so inside this method we hide/reshow banner

void openNewPage() async{
         //hide banner before start new page
         bannerAd?.dispose();
         await Navigator.push(context, MaterialPageRoute(builder: (_) => MySecondScreen()));
         //now user is return to this page so reshow banner
         initAds();
        }