Firebase AdMob – How to Display a Banner Using Firebase AdMob

Firebase AdMob – How to Display a Banner Using Firebase AdMob

Independent app developers often use ads flutter tutorial to make money from their applications. How can you show a banner ad in your app?

There are two relevant results for AdMob if you search for Flutter packages. One is admob and the other is fire base. As of writing, the former only supports interstitial ads and hasn’t been updated for 7 months, while the latter supports banner and rewarded video ads, and was updated last week.

This code will show you how to use a banner ad to advertise. The trick is to make sure the ad doesn’t hide the bottom of your screen content, for example, your snack bars aren’t hidden behind the banner ad.

Set up the app

A simple app with a list will be created. There is an ad at the bottom of the screen.

You can create a new app to follow the code.

1 flutter create fire baseadmobexample

If you don’t know how to set up a Flutter app, check out Getting started with Flutter.

We create a Material app in main.dart, which will launch the ListPage.

The main.dart can be used to import package:flutter/material.dart.

We create a list page. There is a list with hardcoded items for this example.

class ListPage extends StatefulWidget ListPage(Key key) : super(key)

The pubspec.yaml needs to be amended to include thePlugin.

flutter firebase_admob: 0.3.0 1 2 3 4 dependency

Make sure you run flutter packages upgrade if you don’t know the latest version number.

If you are on a previous version, make sure to upgrade. You will see an error message if you don’t.

You will need to set up Firebase in either of the two platforms. We did the required changes in the step above, but you can check out the official Firebase for Flutter codelab to ignore the changes.

Looking for a job? You can find my job board at flutterjobs.

Set up Firebase AdMob

There are 5 steps:

Show a banner ad

The first thing we need to do to show a banner ad is initialise the app id. The banner ad will be created, load and shown by the plugin. ListPage is where we do this.

import ‘package:flutter/material.dart’; import ‘package:firebase_admob/firebase_admob.dart’; const _bannerAd is related to createBannerAd. ; _bannerAd ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;

There is a problem. The bottom of the list is not visible.

The snack bar is hidden behind the ad.

The bottom of the screen should not be hidden.

There is an option for persistent footer buttons in the documentation. By amending ListPage, we can use this.

List_page.dart is built with a build context.

There is a new divider above the top of the ad if we run the app again. The height of the container is what determines the value. If you want to play around with that height, I recommend a value close to 50. As far as the list is concerned, this is the bottom of the screen.

If we don’t have an ad to show, the screen looks silly. If an ad is shown, we need to add some logic to work it out.

List_page.dart BannerAd _bannerAd; bool _adShown; static final MobileAdTargetingInfo targetingInfo, which is the new MobileAdTargetingInfo. _adShown is false; _bannerAd is createBannerAd(). BannerAd _bannerAd ; bool _adShown ; static final MobileAdTargetingInfo targetingInfo. _adShown is false and _bannerAd is true.


The firebase_admob is under development. The support for rewarded video ads was added last week. Keep an eye on it.


Leave a Reply

Your email address will not be published.