Today we are going to learn how we can add an Interstitial ad with Admob in Flutter
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/12/imagen-37.png?resize=307%2C309&ssl=1)
The first thing we are going to do is create the file with our ad IDs, for that we have to go to Admob and get the code that will allow us to add the banner.
Now we are going to create this file: idsAnuncios.dart
import 'dart:io'; const test = false; String getIdInterstitial() { var bannerId = "ca-app-pub-3940256099942544/6300978111"; if (Platform.isAndroid) { if (!test) { //Real ads bannerId = "your_android_banner_ad_id"; } else { //Test ads bannerId = "ca-app-pub-3940256099942544/1033173712"; } } else if (Platform.isIOS) { if (!test) { //Real ads bannerId = "your_ios_banner_ad_id"; } else { //Test ads bannerId = "ca-app-pub-3940256099942544/4411468910"; } } return bannerId; }
We have added a variable that will allow us to put the ads in test mode.
We have added the default test Banner ad ID offered by Admob.
Also, we assign the ads for Android and iOS.
Where it says your_copied_code, you add the Admob code you have created.
Now we are going to add the library that will allow us to use Google ads:
google_mobile_ads
For this:
flutter pub add google_mobile_ads
Also, we will have to add the following inside pubspec.yaml to increase the minimum SDK to 2.12.0 and allow null safety
environment: # Update the minimum sdk version to 2.12.0 to support null safety. sdk: ">=2.17.0 <3.0.0"
Note: in my case as of this date it already generates projects with this version:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/12/imagen-35.png?resize=260%2C66&ssl=1)
Now we open our AndroidManifest inside the directory: android/app/src/main/AndroidManifest.xml
And we add the application code:
<manifest> ... <application> ... <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713"/> </application> </manifest>
In case of iOS you should add inside info.plist
<
pre class=”EnlighterJSRAW” data-enlighter-language=”generic” data-enlighter-theme=”” data-enlighter-highlight=”” data-enlighter-linenumbers=”” data-enlighter-lineoffset=”” data-enlighter-title=”” data-enlighter-group=””>
Note:
Test APP id: ca-app-pub-3940256099942544~334751171
You must add yours, generated from Admob.
Now let’s go to our main screen and let’s initialize the ads with this function:
Future _initGoogleMobileAds() { // Initialize Google Mobile Ads SDK return MobileAds.instance.initialize(); }
And now we are going to create the interstitial.
interstitial.dart
import 'package:flutter/material.dart'; import 'package:google_mobile_ads/google_mobile_ads.dart'; import 'package:walls_wallpapers/util/idsAnuncios.dart'; class AdInterstitial { static InterstitialAd? _interstitialAd; static Future<void> initialize() async { await _loadInterstitialAd(); } static Future<void> _loadInterstitialAd() async { InterstitialAd.load( adUnitId: AdHelper.interstitialAdUnitId, request: AdRequest(), adLoadCallback: InterstitialAdLoadCallback( onAdLoaded: (InterstitialAd ad) { print('Interstitial Ad loaded'); _interstitialAd = ad; }, onAdFailedToLoad: (LoadAdError error) { print('Interstitial Ad failed to load: $error'); }, ), ); } static void showInterstitialAd() { if (_interstitialAd == null) { print('Interstitial Ad not loaded yet.'); return; } _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback( onAdDismissedFullScreenContent: (Ad ad) { print('Interstitial Ad dismissed'); // Here you can navigate to the home screen or perform another action after the ad is closed. _loadInterstitialAd(); // Load a new ad after the current one has been shown. }, ); _interstitialAd!.show(); } static void dispose() { _interstitialAd?.dispose(); } } class AdHelper { static String interstitialAdUnitId = getIdInterstitial(); }
And we add the initializer in main.dart
AdInterstitial.initialize();
And now we can load our ad wherever we want like this:
AdInterstitial.showInterstitialAd();
Or from a button for example:
ElevatedButton( onPressed: () { AdInterstitial.showInterstitialAd(); }, child: Text('Show Ad'), )
And that’s it, this is the result:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/12/imagen-38.png?resize=376%2C676&ssl=1)
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)