How to Integrate AdMob Ads in your Flutter app using firebase_admob package ?

Flutter Firebase AdMob Ads
Flutter Firebase AdMob Ads
firebase_admob
firebase_admob

step 1 : Add package name - firebase_admob in pubspec.yaml

firebase_admob: ^0.9.0+9

Adding Flutter Package
Adding Flutter Package

step 2 : Add meta data to Android-Manifest.xml

  • Replace ca-app-pub-################~##########with your real AdMob app ID or a test app ID.
<manifest>
<application>
<!-- TODO: Replace with your real AdMob app ID -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-################~##########"/>
</application>
</manifest>
Adding meta-data to AndroidManifest.xml
Adding meta-data to AndroidManifest.xml

step 3 : Coding : Sample Flutter App Code

Note : Use Stateful Widgets

How to Implement Banner Ads ?

  • Define Banner Ad Property
  • Set size (Banner Size) — largeBanner, banner etc
  • Set adUnitId (here we are using TestAdUnitId)
  • Default Banner location — bottom of the screen
  • You can even set banner location to top using anchorType property as shown below
  • Provide anchorOffset value to avoid overlap with common UI elements on the screen.
  • Using listener, once the ad is loaded , show your banner ad using ..show() method
Define Banner Ad Property
Define Banner Ad Property
  • Ads must be loaded before they are shown. Load your ads in initState Method
  • Also, intialize FirebaseAdMob instance — appId. Here we are using testAppId
Load Banner Ad
Load Banner Ad

Banner Ad Demo App User Interface

Select BannerAd button to open a BannerAd Page

Demo App HomeScreen — BannerAd
Demo App HomeScreen — BannerAd

Banner Ad Demo Ad 1 — buildBannerAd()

  • Default size Banner Test Ad displayed at the bottom of the screen
Banner Ad
Banner Ad

Banner Ad Demo Ad 2 — buildLargeBannerAd()

  • Large Banner Ad at the top of the screen
  • Offset allows us to place ad below the AppBar so that it does not overlap with other UI elements on the screen.
Large Banner Ad
Large Banner Ad

How to Implement Interstitial Ads ?

  • Define Interstitial Ad Property
  • Set adUnitId (here we are using testAdUnitId)
  • MobileAdEvent.closed — user closes a ad
this load() method keeps another ad ready to be displayed when the right time comes - when show() method is invoked
  • showInterstitialAd() — shows interstitial ads every time when a user navigates from one screen to another.
  • showRandomInterstitialAd() — showing ads every time can be annoying to users, so we can use this method to show ads randomly.
Define Interstitial Ad Property
Define Interstitial Ad Property
  • Ads must be loaded before they are shown. Load your ads in initState Method
Load Interstitial Ad
Load Interstitial Ad
  • To Display your ad — call showInterstitialAd() or showRandomInterstitialAd() on button press
Show Interstitial Ad
Show Interstitial Ad

Interstitial Ad Demo App User Interface

  • Select InterstitialAd button to open Interstitial Ad Page
Demo App HomeScreen — Interstitial Ad
Demo App Home Screen — Interstitial Ad
Flutter Interstitial Ad Demo
Flutter Interstitial Ad Demo

How can I apply this guide to my real Android App ?

This guide explains how to enable test ads in your app. These ad units are not associated with your AdMob account and are sample ad units that are used for building and testing your apps.

<manifest>
<application>
<!-- TODO: Replace with your real AdMob app ID -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-################~##########"/>
</application>
</manifest>
BannerAd buildBannerAd() {
return BannerAd(
// Replace the testAdUnitId with an ad unit id from the AdMob dash. adUnitId: BannerAd.testAdUnitId,
size: AdSize.banner,
...
}

Useful Resources

Developer Guide - Update your AndroidManifest.xml

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AkshatApp

AkshatApp

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com