Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.
This guide explains how to integrate interstitial ads into a Flutter app.
Always test with test ads
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
The easiest way to load test ads is to use our dedicated test ad unit ID for interstitials:
Android
ca-app-pub-3940256099942544/1033173712
iOS
ca-app-pub-3940256099942544/4411468910
The test ad units are configured to return test ads for every request, and you're free to use them in your own apps while coding, testing, and debugging. Just make sure you replace them with your own ad unit IDs before publishing your app.
Load an ad
The following example loads an interstitial ad:
class InterstitialExampleState extends State<InterstitialExample> { InterstitialAd? _interstitialAd; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/1033173712' : 'ca-app-pub-3940256099942544/4411468910'; /// Loads an interstitial ad. void loadAd() { InterstitialAd.load( adUnitId: adUnitId, request: const AdRequest(), adLoadCallback: InterstitialAdLoadCallback( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); // Keep a reference to the ad so you can show it later. _interstitialAd = ad; }, // Called when an ad request failed. onAdFailedToLoad: (LoadAdError error) { debugPrint('InterstitialAd failed to load: $error'); }, )); } }
Interstitial ad events
Through the use of FullScreenContentCallback
, you can listen for lifecycle
events, such as when the ad is shown or dismissed. Set
InterstitialAd.fullScreenContentCallback
before showing the ad to receive
notifications for these events. This example implements each method:
class InterstitialExampleState extends State<InterstitialExample> { InterstitialAd? _interstitialAd; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/1033173712' : 'ca-app-pub-3940256099942544/4411468910'; /// Loads an interstitial ad. void loadAd() { InterstitialAd.load( adUnitId: adUnitId, request: const AdRequest(), adLoadCallback: InterstitialAdLoadCallback( // Called when an ad is successfully received. onAdLoaded: (ad) { ad.fullScreenContentCallback = FullScreenContentCallback( // Called when the ad showed the full screen content. onAdShowedFullScreenContent: (ad) {}, // Called when an impression occurs on the ad. onAdImpression: (ad) {}, // Called when the ad failed to show full screen content. onAdFailedToShowFullScreenContent: (ad, err) { // Dispose the ad here to free resources. ad.dispose(); }, // Called when the ad dismissed full screen content. onAdDismissedFullScreenContent: (ad) { // Dispose the ad here to free resources. ad.dispose(); }, // Called when a click is recorded for an ad. onAdClicked: (ad) {}); debugPrint('$ad loaded.'); // Keep a reference to the ad so you can show it later. _interstitialAd = ad; }, // Called when an ad request failed. onAdFailedToLoad: (LoadAdError error) { debugPrint('InterstitialAd failed to load: $error'); }, )); } }
Display an interstitial ad
An InterstitialAd
is displayed as an Overlay
on top of all app content and is statically placed; thus, it can't be added to
the Flutter widget tree. You can choose when to show the ad by calling show()
.
_interstitiaAd.show();
Once show()
is called, an Ad
displayed this way can't be dismissed
programmatically and requires user input. An InterstitialAd
can only be shown
once. Subsequent calls to show will trigger onAdFailedToShowFullScreenContent
.
An ad must be disposed when access to it is no longer needed. The best practice
for when to call dispose()
is in the
FullScreenContentCallback.onAdDismissedFullScreenContent
and
FullScreenContentCallback.onAdFailedToShowFullScreenContent
callbacks.
That's it! Your app is now ready to display interstitial ads.
Next steps
- See Interstitial best practices and interstitial ad guidance.
- Check out an Interstitial ads case study.
- If you haven't already, create your own interstitial ad unit in the AdMob UI.