Skip to main content

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

In this guide, we will learn how to integrate AdMob Ads in your flutter app using firebase_admob package. We will learn how to integrate banners ads and interstitial ads.



📢 This package has been discontinued in April 2021 in favor of Google Mobile Ads SDK for Flutter. Please refer our new guide for Google Mobile Ads SDK for Flutter



❌Flutter Package : firebase_admob
It is a plugin for flutter that supports loading and displaying banner, interstitial(full-screen), and rewarded video ads using Firebase AdMob API.❌

Learn More : firebase_admob


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

firebase_admob: ^0.9.0+9

To learn how to use packages in flutter refer our Using Flutter Packages Guide

Adding Flutter Package
Adding Flutter Package

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

<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
This is a simple app demo to learn how to integrate admob ads in your flutter app.

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 Demo 1
Banner Ad Demo 1
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.
Banner Ad Demo 2
Banner Ad Demo 2

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 ie. 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

  • Display your ad - call showInterstitialAd() on button press

Note: Enable WiFi or mobile network on your test device or emulator to see test ads.

Interstitial Ad Demo App User Interface

Select InterstitialAd button to open Interstitial Ad Page
Demo App HomeScreen - Interstitial Ad
Demo App HomeScreen - 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.

Note : If you want to publish your app to Play Store or App Store then you will have to add your AdMob app ID in your AndroidManifest.xml file. Once you find your AdMob app ID in the AdMob UI add it to your AndroidManifest.xml file as explained in step 2.
<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>
Also replace testAdUnitId with an ad unit ids from AdMob to display real ads to your app users.

BannerAd buildBannerAd() {
    return BannerAd(
 // Replace the testAdUnitId with an ad unit id from the AdMob dash.
        adUnitId: BannerAd.testAdUnitId,
        size: AdSize.banner,
 ...
  }

Useful Resources


The information contained on this blog is for academic and educational purposes only.
Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited.The materials(images, logos, content) contained in this web site are protected by applicable copyright and trademark law.

Popular posts from this blog

Step-by-Step Guide to create a new flutter project using Visual Studio Code [VS Code]

This is a beginner's guide to visual studio code and flutter. VS Code is a light weight editor with flutter app development, execution and debug support. Visual Studio Code is a source-code editor developed by Microsoft. Install latest stable version of VS Code Install the Flutter and Dart plugins In VS Code "Extensions" Tab, search field type flutter, select "Flutter" in the list and click "Install". Flutter plugin also installs the required Dart plugin. Validate your flutter setup using "flutter doctor command". Once Flutter SDK and your VS Code Editor is up and running, Flutter Visual Studio Code To Create a new flutter project from the flutter starter app template follow the below steps step 1 : Open Command Palette Use Shortcut key - Ctrl+Shift+P or Cmd+Shift+P on macOS OR Go to View Menu, select "Command Palette" VS Code Command Palette step 2 : Create Flutter New Project Sele

Step-by-Step Guide for Flutter Android APK Signing and Release

In this guide we will learn how to sign the release version of apk or aab(android app bundle) to publish our flutter app to android play store. flutter release apk How to sign the apk or app bundle created using flutter ? To publish your app on Play Store, you need to give your app a digital signature. step 1 : Create a new keystore file ; if you have an existing keystore , skip this step Run command in your terminal for linux/mac keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key On Windows, use the following command: keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key Fill in the required info inside the terminal Enter keystore password: test@12345 Re-enter new password: test@12345 What is your first and last name? [test]: test What is the name of your organizational unit? [test]: test

Step-by-Step Guide to take a App Screenshot with the Device Frame using Android Studio

This guide will help you to take a screenshot with the device frame using android studio. If we capture screenshot using the default android emulator "Capture Screenshot" option, then screenshot will not have the device frame. Android Emulator - Screen Capture By using android studio we can capture screenshot with different devices frame. How to take a App Screenshot with the Device Frame using Android Studio step 1 : Load your project in android studio and run the app Open Android Studio Load your android app project in android studio.  Build and Run your app using android emulator or a connected physical device.  If you are using a physical device make sure that you have enabled USB DEBUGGING option. Android Studio - Load Project step 2 : Open Logcat in Android Studio Check out bottom left corner in android studio to find Logcat option and click to open Logcat If it is not visible then select "View Menu" and search for