How to show a Firebase AdMob banner ad in Flutter

Love them or hate them, ads are a common way for indie app developers to make money from their apps. So, how can you display a banner ad in your Flutter app?

If you search Flutter packages for “ad”,  there are currently two relevant results, both for AdMob. One is admob and the other is firebase_admob. As of writing this, the former only supports interstitial ads and hasn’t been updated for 7 months; as for the latter, it supports interstitial, banner and rewarded video ads as of version 0.3.0, and was updated last week.

This code tutorial will show you how to display a banner ad using firebase_admob plugin. It includes a trick to make sure the ad doesn’t hide the bottom of your screen content, so, for example, your Snackbars aren’t hidden behind the banner ad.

Set up the app

We will create a simple app with one screen containing a list. At the bottom of the screen, we display a Firebase AdMob ad.

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Firstly, we create a Material app in main.dart, which will launch the ListPage widget.

 

Secondly, we create list_page.dart. This displays a list (with hardcoded items for this example).

Thirdly, we need to amend pubspec.yaml to include the plugin.

Don’t forget to check the plugin page for the latest version number, and make sure you run  flutter packages upgrade .

Note: the plugin needs Gradle plugin 4.1. So if you’re on a previous version, make sure you follow those steps to upgrade. If you don’t, you will see the following error message  A problem occurred evaluating project ':firebase_admob'. > Could not find method google() for arguments [] on repository container. .

Finally, you will need to set up Firebase in iOS and/or Android as required. Check out the official Firebase for Flutter codelab: step 5 – set up Firebase integration, but ignore the changes to pubspec.yaml (we’ve done the required changes in the step above).

Set up Firebase AdMob

There are 5 steps:

  1. Sign up for AdMob.
  2. Set up an unpublished app in AdMob (select to view “AdMob Beta”). You will need to make a note of your app id.
  3. Link your app to Firebase (select to view “AdMob Beta”).
  4. Create a banner ad unit in AdMob (ignore step 10). You will need to make a note of your ad unit id.
  5. Re-download your google services set up file(s), ie google-services.json for Android and GoogleService-Info.plist for iOS. You can do so by going to your Firebase project overview, then select to view settings for your app. Replace the file(s) you downloaded while following the Firebase for Flutter codelab: step 5 – set up Firebase integration (refer paragraph above this section).

Show a banner ad

To show a banner ad using the plugin, we first need to initialise the plugin with the app id. Then we ask the plugin to create, load and show the banner ad. We do this in ListPage as below.

Let’s run the app… List showing… Ad loading and showing… Oh oh, there is a problem. The bottom of the list is hidden behind the ad!

Ad hiding bottom of screen
Ad hiding bottom of screen

Likewise, if you try to show a snackbar, it is hidden behind the ad.

 

Make sure the banner doesn’t hide the bottom of the screen

Looking at the documentation, Scaffold comes with an option for persistentFooterButtons. So let’s use this, by amending ListPage as below.

If we run the app again, you will see a new divider a few pixels above the top of the ad. The value is determined by the height of the Container used for fakeBottomButtons. You may want to play around with that height, but I recommend a value close to 50.0; this will ensure the ad isn’t tapped on because it is too close to a list element. This divider is essentially the bottom of the screen as far as the list is concerned.

However, if we have no ad to show (eg no network connection), the screen looks silly with this divider. So we need to add some logic to work out if an ad is shown, and only add fakeBottomButtons if it is.

Voila!

Ad not hiding bottom of screen
Ad not hiding bottom of screen
No ad loaded
No ad loaded

 

 

 

 

 

 

 

Enjoying this code tutorial? Support the blog!

Options
 

What next?

The firebase_admob plugin is still under development. For example, support for rewarded video ads was added last week. Therefore, keep an eye on it for further improvements.

 

 

 

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

Author: Natalie Masse Hooper

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

2 thoughts on “How to show a Firebase AdMob banner ad in Flutter”

  1. Hi Natalie,

    I got a question for you.
    I did try to implement an Ad in my app, is showing in the first screen but then it doesn’t hide in the second.

    If I manually call dispose of the Ad then it dissapear but it will not be recreated.

    Basically I want to display the Ad only in certain screen.

    Thank you for your help 🙂

    1. Try recreating the ad when you come back to the first screen. Assuming you start the second screen with the Navigator, you can implement the pattern described in my How to startActivityForResult in Flutter tutorial. Where tutorial shows how to read the map data sent back by the second screen, you can write code to reinit the ad and show it.

Leave a Reply

Your email address will not be published. Required fields are marked *