Flutter-Google Mobile Ads Integration (Android)

Have you ever wonder, how google ads, in-line ads, and overlay ads are work on mobile applications, how their display is made, what are the calls that trigger such ads, and how to even configure such ads from Google Ad Manager? Stay calm and don’t worry because you have chosen the right place that will entertain all such concerns. So let’s begin

Let’s Monetize the Flutter Application

Disclaimer: tutorial seniority: beginner level. Know how flutter works? Well, you are in!

Get Started

Below are the defined steps that we are following in this article.

1. Create Google Ad Manager AdMob Account.
2. Add Application to AdMob dashboard & create ads units.
3. Setup Ad Manager with Flutter application.
4. Add Flutter plugin into the application which helps us to integrate ads and link them with our Google Ad Manager.
5. Ads development with Flutter.
6. Final Result.

Step # 01: Create Google Ad Manager Account

1. Go to AdMob Google and create for sign-in with any of your google accounts.
2. Once you log in with your account, you will be asked to provide the following information to create an AdMob account. Select information as per your region and accept T&Cs. Click on Create Ad Mob Account.
3. For the next step, you will be asked to provide answers to some questions. Choose options as per your need and application scope. For this tutorial, I chose ‘no’ and click on NEXT to verify your account. Verify your account by giving a phone number and enter the received pin.

4. Your AdMob account has been created and verified. Let’s move to the second step.

Step # 02: Add Application to AdMob Dashboard and Create Ads units.

1. In the previous step, we have successfully created an account and verified it. Now it’s time to add an application. Make sure to have the AdMob Dashboard once the account is verified like below.

2. Now go to App and select Add your First App.

3. Select the application platform ‘android’ or ‘iOS’ and make sure to choose the next option carefully. For a production-ready application that is already published on app stores, you will require a couple of days to get your apps reviewed and approved to serve and run ads. For debug/testing/learning purposes choose no and proceed next.

4. Give the application name and selecting user metrics is optional. Click on Add App. Your Ad Mob application is now successfully created. We can now create Ad Units.

Create Ads Units

Ad Unit - An ad unit is an ad that developers integrate into their application and run ads over the application for monetization.

After creating the AdMob application, we are now required to create Ads. Google Ads can be of various formats. For the simplicity of this tutorial, we will only create Banner Ad and Interstitial Ad. For more info regarding ads format, do checkout Google AdMob Formats.

Go to your AdMob Dashboard, you’ll find your newly created application, Click on Ad Unit as below.

1. Create Ad unit and select Banner as Ad Format. Provide banner ad name and leave the advanced settings as default. Again select Interstitial Ad, provide name, and done.
2. Banner and Interstitial Ads are created with their ad Ids.

Make sure to collect App Id from the side menu App Settings. Now you have ads Ids and app Id, they will be added to the Flutter application in the next step.

Step # 03 & 04: Setup Ad Manager with Flutter Application

1. Create a default flutter application. After successful creation of the flutter application, go to AndroidManifiest.xml and add this meta tag element inside the application tag. Get your application Id from Ad Mob Dashboard App Settings and place it in android:value

2. Now go to your pubsec.yaml and add the following plugin: google_mobile_ads. Don’t forget to run Pub get.

Step # 05: Ads Development with Flutter

We will be creating a simple list of items using ListView.builder() where on specified index a banner ad will be displayed and upon taping on any item, interstitial ad (overlay ad over the application) will be displayed.

Project Structure

Do follow the below structure and let's get into the code!

lib/
┣ ads/
┃ ┗ ads_inline_page.dart
┣ helper/
┃ ┗ ad_helper.dart
┣ home/
┃ ┗ home.dart
┗ main.dart

Goto ad_helper.dart and here we will create two static methods for extracting the banner and interstitial ads ids when consuming it.

The quickest way to add ad units ids for testing and run ads over your application is to provide Google-provided demo test ads ids. Make sure to replace it with your production ads ids when releasing and publishing the application. Check Google Demo Test Ads Ids

Let’s create a home page which will call our ads page. Use the code as provided for home.dart

Inside ads_inline_page.dart, create AdsPage as a stateful widget so that we can call initState( ) for ads initialization and dispose() it when we no longer use it. Find code here

AdsPage Development Brief

Banner Ads:

For banner ads, we are calling _createBannerAd() custom method on initState() that will use BannerAd constructor to prepare a banner ad. It requires banner ad unit id, size of banner, request, and listener which can be used for ad lifecycle events. Once the banner is created we will call ad.load() which will load our banner ad before showing it to the screen.

To display a banner on any desire position, the plugin provides AdWidget which is like any other widget flutter has. Make sure to wrap the AdWidget with Container widget with the specified banner ad width and height to avoid crashes for iOS.

In this application, we are displaying a banner at the index 8 positions of the displayed list.

_kAdIndex = 8 //indicates the index of banner that will be displayed on screen below.

Make sure to dispose banner ad on dispose() call. That’s it for a banner ad. Let’s move to Interstitial Ads.

Interstitial Ads:

Interstitial ads are full-screen ads that overlay on the application screen. For such ad, call the custom method _createInterstitialAd() on initState(). Interstitial add requires to load with its constructor Interstitial.load() it will require ad unit id, adRequest, and InterstitialAdLoadCallback. Find code here

To display interstitial ads over the Flutter widget tree, call show(). InterstitialAdLoadCallback, is utilizing the lifecycle events when the ad is shown or dismissed.

Upon tap on a list item, a call to _showInterstitialAd() will be made that will display an interstitial ad over the application.

The Results

Github Code for Flutter AdMob

GitHub - Insha-Siddiquii/flutter-google-adMob

Hope this article helps you, follow for more Flutter and Dart stuff, and don’t forget to clap 👏👏