Embedding ads into flutter’s widget tree with admob_flutter

Vito Piegari
Jun 24 · 4 min read

There are several ways to earn money from an app, one of them is ads. Flutter provides an official plugin for displaying ads inside applications, but it’s not what you would expect from an official plugin.

The official way to display ads inside Flutter applications is firebase_admob but it works like an overlay, this means that you should adapt your design in order to display ads without hiding anything of your app because ads will be rendered over your widget tree, covering everything that is under them. Overlays also need to have a fixed position over the screen so you can’t put them, for example, int scroll views.

Since I recently published Quake on the Google Play Store, I wanted to display some ads without annoying the user. The prettiest way was to display ads inside the layout like this:

Where I wanted to put ads.

So I started searching for a plugin that, unlike the official one, made it possible to display native ads. When ads are part of the widget tree you can do whatever you want to them like they were a normal widget, like adding padding, adding round corners, putting them into a ListView,…

I found admob_flutter which is an unofficial plugin made by Youssef Kababe. This plugin does exactly what we wanted to do, unfortunately its development is slow and the creator is searching for a new maintainer, but the base functions are working well, and we can display ads without breaking our beautiful designs.

Let’s create a simple app that uses the plugin. First of all let’s create a new flutter project with:

flutter create admob_test

Let’s clean lib/main.dart and then upgrade the project to AndroidX following this guide. You should have, now, something like this in your lib/main.dart:

In order to get the plugin working we should add it as a dependency to our pubspec.yaml file:

Then we should add these three lines (between application and activity) to our android/app/src/main/AndroidManifest.xml :

Your manifest should look like this.

In order to setup the plugin for iOS you should update your Info.plist by adding these two keys:

Your Info.plist should look like this.

Both of the keys used here must be used for testing purposes only and you shouldn’t use them in a production environment.

TIP: Always perform a flutter clean after updating AndroidManifest.xml or Info.plist

The last thing to do in order to finish the setup is to initialize the plugin. Go to your lib/main.dart and add the following line before the runApp() function call:


Then create the getAppId() function to make your main.dart look like this:

We are now ready to show ads by using AdmobBanner widget!

For example let’s say you want to add ads to an application like this:

example app.

Let’s first create the function getBannerAdUnitId():

Keys are for testing only.

and let’s add the widget to our list of widgets:

Complete code can be found here: https://github.com/veetaw/admob_flutter_example

How the result will look like

There are 6 sizes possible for the ad banner, including a smart one that will try to fit the size of the parent:

  • AdmobBannerSize.Banner -> 320x50
  • AdmobBannerSize.LARGE_BANNER -> 320x100
  • AdmobBannerSize.MEDIUM_RECTANGLE -> 300x250
  • AdmobBannerSize.FULL_BANNER -> 468x60
  • AdmobBannerSize.LEADERBOARD -> 728x90
  • AdmobBannerSize.SMART_BANNER -> adaptive

Why is it so important to have our ad embedded into the tree? The ad will now scroll like a normal widget and can be used as child to other widgets, like ClipRRect to give to it rounded corners like here:

The plugin also supports interstitial ads and rewarded ads.

For more details check the official pub.dev page and the Github Repository.

Vito Piegari

Written by

I’m an Italian guy interested in computer science. Follow me on Github: https://github.com/veetaw and linkedin: www.linkedin.com/in/vitopiegari

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade