How to implement Google interstitial Ads in Flutter

Spread the love

Google Interstitial Ads

Implementing google interstitial ads in flutter is quite easy now as google has provided powerful library for implementing google interstitial ads in our application and make revenue from it. To implement google interstitial ads in your project, follow this article and make sure that you do all steps same as I shown in this article.

We will be implementing google interstitial ads in two parts

1. Setting up our app to show google ads.

2. Show google interstitial ads.

1. Setup App to show Google Ads

1. Run below command with flutter to add google_mobile_ads in you project:

$ flutter pub add google_mobile_ads

1. Add following under dependencies in your project’s pubspec.yaml file.

dependencies:

google_mobile_ads : ^1.2.0

Now, run flutter pub get

2. Now we have to make some changes in our app level build.gradle file

compileSdkVersion 31

defaultConfig {

applicationId “com.example.googleAds”

minSdkVersion 19

targetSdkVersion 31

multiDexEnabled true

versionCode flutterVersionCode.toInteger()

versionName flutterVersionName

}

Make sure that you have compileSdkVersion 28 or higher and minSdkVersion 19 or higher.

3. Add AdMob ID in AndroidMenifest file.

<!– Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 –>

<meta-data

android:name=”com.google.android.gms.ads.APPLICATION_ID”

android:value=”ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy”/>

3. Add Following Lines in main.dart file

void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();

runApp(MyApp());
}

Now Almost all setup is Done. It’s time to use this in our code to show Ads.

2. Show Google Interstitial Ads

Let’s have one stateful widget to load and show our google interstitial ads.

import 'package:flutter/material.dart';

import 'package:google_mobile_ads/google_mobile_ads.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Make one variable of type InterstitialAd and on of type bool. here, Variable of type InterstitiaAd will hold our interstitial ad and type bool will hold true if our interstitial ad is loaded else false.

Now add loadInterstitial() method in this widget.

import 'package:flutter/material.dart';

import 'package:google_mobile_ads/google_mobile_ads.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  InterstitialAd? interstitialAd;
  bool isInterstitialAdLoaded=false;

  void loadInterstitial()
  {

  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Now add Following code into our loadInterstitial() method.

void loadInterstitial() {
  InterstitialAd.load(
    adUnitId: "ca-app-pub-3940256099942544/1033173712",
    request: const AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (ad) {
        print("Ad Loaded");
        setState(() {
          interstitialAd = ad;
          isInterstitialAdLoaded = true;
        });
      },
      onAdFailedToLoad: (error) {
        print("Ad Failed to Load");
      },
    ),
  );
}

Let’s call this method in didChangeDependencies() method in our class.

@override
void didChangeDependencies() {
  // TODO: implement didChangeDependencies
  super.didChangeDependencies();
  loadInterstitial();
}

Now our ad should load. it’s time to show it.

Let’s have one button in our screen which will show interstitial ad on pressed.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          if (isInterstitialAdLoaded) {
            interstitialAd!.show();
          }
        },
        child: const Text("Show Ads"),
      ),
    ),
  );
}

Job Done!!

Full code looks like this:

import 'package:flutter/material.dart';

import 'package:google_mobile_ads/google_mobile_ads.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  InterstitialAd? interstitialAd;
  bool isInterstitialAdLoaded = false;

  void loadInterstitial() {
    InterstitialAd.load(
      adUnitId: "ca-app-pub-3940256099942544/1033173712",
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          print("Ad Loaded");
          setState(() {
            interstitialAd = ad;
            isInterstitialAdLoaded = true;
          });
        },
        onAdFailedToLoad: (error) {
          print("Ad Failed to Load");
        },
      ),
    );
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    loadInterstitial();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (isInterstitialAdLoaded) {
              interstitialAd!.show();
            }
          },
          child: const Text("Show Ads"),
        ),
      ),
    );
  }
}

That’s all we need to load and show google interstitial ad in flutter. Hope this helps you. Happy Coding!!