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:
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 :
In order to setup the plugin for iOS you should update your Info.plist by adding these two keys:
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:
Let’s first create the function getBannerAdUnitId():
and let’s add the widget to our list of widgets:
Complete code can be found here: https://github.com/veetaw/admob_flutter_example
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.