Flutter firebase_admob show only once

Question

The following code show the banner ad at the bottom of the application and show interstitial ad when click. Interstitial ad is shown when the button is pressed. The problem is, when the app start and click button for the first time, the interstitial is shown but the interstitial is not shown starting from second time. There are no errors and all log message show success. Is my code error? I'm testing on android device.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  final admobAppId = 'ca-app-pub-3940256099942544~3347511713';
  final bannerId = 'ca-app-pub-3940256099942544/6300978111';
  final interstitialId = 'ca-app-pub-3940256099942544/1033173712';

  BannerAd bannerAd;
  InterstitialAd interstitialAd;

  MyApp() {
    FirebaseAdMob.instance.initialize(appId: admobAppId);
    makeBannerAd();
    initInterstitialAd();
  }

  makeBannerAd() {
    bannerAd = BannerAd(
        adUnitId: bannerId,
        size: AdSize.smartBanner,
        listener: (MobileAdEvent me) {
          print('MobileAdEvent $me');
        });
    bannerAd
      ..load()
      ..show();
  }

  initInterstitialAd() {
    interstitialAd = InterstitialAd(
        adUnitId: interstitialId,
        listener: (MobileAdEvent me) {
          print(
              '========== Interstitial ad mobile ad event =========== \n $me');
          if (me == MobileAdEvent.closed) {
            print('Interstitial closed');
            loadInterstitialAd();
          }
        });
    loadInterstitialAd();
  }

  loadInterstitialAd() {
    interstitialAd.load().then((val) {
      if (val) {
        print('Interstitial ad loaded callback success');
      } else {
        print('Interstitial ad loaded callback failed');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdMob plugin test'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show Interstitial!'),
            onPressed: () {
              interstitialAd.show().then((val) {
                if (val) {
                  print('Interstitial ad show callback success');
                } else {
                  print('Interstitial ad show callback fail');
                }
              });
            },
          ),
        ),
      ),
    );
  }
}

Update
Following is the code with dispose(). It show up to 2 times.

class MyApp extends StatelessWidget {

  final admobAppId = 'ca-app-pub-3940256099942544~3347511713';
  final bannerId = 'ca-app-pub-3940256099942544/6300978111';
  final interstitialId = 'ca-app-pub-3940256099942544/1033173712';

  BannerAd bannerAd;
  InterstitialAd interstitialAd;
  MobileAdTargetingInfo mobileAdTargetingInfo;

  MyApp() {
    FirebaseAdMob.instance.initialize(appId: admobAppId);
    makeBannerAd();
    initInterstitialAd();
  }

  makeBannerAd() {
    bannerAd = BannerAd(
        adUnitId: bannerId,
        size: AdSize.smartBanner,
        listener: (MobileAdEvent me) {
          print('Banner => MobileAdEvent $me');
        });
    bannerAd
      ..load()
      ..show();
  }

  initInterstitialAd() {
    interstitialAd = InterstitialAd(
        adUnitId: interstitialId,
        listener: (MobileAdEvent me) {
          print(
              '========== Interstitial ad mobile ad event =========== $me');
          if (me == MobileAdEvent.closed) {
            print('Interstitial closed');
            interstitialAd.dispose().then((val){
              if(val){
                loadInterstitialAd();
              }else{
              }
            });
          } else if (me == MobileAdEvent.failedToLoad) {
            print('Interstitial failed to load');
            loadInterstitialAd();
          }
        });
    loadInterstitialAd();
  }

  loadInterstitialAd() {
    interstitialAd.load();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdMob plugin test'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show Interstitial!'),
            onPressed: () {
              interstitialAd.show();
            },
          ),
        ),
      ),
    );
  }
}

Solution 1

I had the same issue and resolved it with the InterstitialAd object as shown:

InterstitialAd myInterstitial() {
    return InterstitialAd(
      adUnitId: InterstitialAd.testAdUnitId,
      targetingInfo: targetingInfo,
      listener: (MobileAdEvent event) {
        if (event == MobileAdEvent.failedToLoad) {
          interstitialAd..load();
        } else if (event == MobileAdEvent.closed) {
          interstitialAd = myInterstitial()..load();
        }
      },
    );
  }
@override
void initState() {
    FirebaseAdMob.instance.initialize(appId: 
        FirebaseAdMob.testAppId);
    interstitialAd = myInterstitial()..load();
    super.initState();
}
@override
void dispose() {
    interstitialAd?.dispose();
    super.dispose();
}

Call method:

interstitialAd
  ..load()
  ..show();

From my understanding, you can use the listener to recursively call the initial InterstitialAd object when the event is closed. My source is from Tensor Programming Youtube Channel He explains it much better than me.

Solution 2

I modified and fixed the code as follow and I also posted in the github issue. Now, whenever the button is pressed the ad is shown. I tested 10+ times and it work well. It seem InterstitialAd need to create every time the ad is wanted to show. But I don't know exactly. If there is someone who knows why, please explain me.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  BannerAd myBanner;

  MyApp() {
    FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
    myBanner =
        BannerAd(adUnitId: BannerAd.testAdUnitId, size: AdSize.smartBanner);
    myBanner
      ..load()
      ..show();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Interstitial Ad test"),
        ),
        body: Center(
          child: RaisedButton(
            child: Text("Interstitial ad"),
            onPressed: () {
              InterstitialAd interstitialAd = new InterstitialAd(
                  adUnitId: InterstitialAd.testAdUnitId,
                  listener: (MobileAdEvent e) {
                    print("Mobile ad event => $e");
                  });
              interstitialAd.load().then((val) {
                interstitialAd.show();
              });
            },
          ),
        ),
      ),
    );
  }
}

Solution 3

I faced the same problem. The solution is simple.

Just use interstitialAd.dispose() to dispose the ad so that a new interstitial ad get loaded the next time.