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

 

 

 

 

 

 

 

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.

 

 

Author: Natalie Masse Hooper

Mobile app developer with 14 years experience. Started with the Android SDK in 2010 and switched to Flutter in 2017. Past apps range from start ups to large tech (Google) and non tech (British Airways) companies, in various sectors (transport, commercial operations, e-commerce).

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

  2. Could you give us the source code..?
    I tried to implement it but fail, the example ad show, but the real ad is not work on flutter (the same ad id work on Ionic Framework 3).

    1. This tutorial was written with v0.3 of the plugin. The plugin is now at version is v0.7 so I suspect there have been quite a few changes. Unfortunately, I haven’t got the time to update the code tutorial, having myself moved away from showing ads in my apps. Therefore, I suggest you look at the plugin documentation to get the latest setup information https://pub.dartlang.org/packages/firebase_admob#-readme-tab-

    2. yes, could you give us, github source code,
      because some may works, some may need to be updated since more release are coming.

  3. The persistentFooterButtons works great on first glance but unfortunately there is some padding applied: when you choose a height of 50 and the banner actually is 50 then there is still a space of around 16 above the banner. I couldn’t find a reliable way to detect the padding. If anybody has one, please share!

    1. Nice solution, but I replaced persistentFooterButtons by bottomNavigationBar. The first one adds some padding, and the second one does not.
      Have in mind that persistentFooterButtons expects a List and bottomNavigationBar just a Widget.

  4. I use plugin admob_flutter 1.0.1 and I want hide Banner Space when there are no Ads flutter. when there are no ads, when user is using app in offline mode there is that empty ugly space. How can I get rid of that space when there are no ads? How to write code ?

Leave a Reply

Your email address will not be published.