Add Admob Banner Ad to Flutter project Android

A lot of mobile apps make money from Ads. There are different types of Ads the user sees. In this tutorial, I’m going to add a bottom Banner ad. Banner ads occupy a spot within an app’s layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.

  1. Requirements: you must configure a new Firebase project and Admob. Follow this Google Flutter codelab to complete the requirements.

Once the above requirements are done:

  • Inside AndroidManifest.xml — add AdMob AppId
<application>
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-##############"/>
</application>
  • Inside pubspec.yaml — add Flutter Admob dependency
firebase_admob: ^0.10.2

Add the Ad banner to home_page.dart: copy and paste below dart code snippets inside your home_page.

2. Create a banner Ad

import 'package:firebase_admob/firebase_admob.dart';
import 'ad_manager.dart';
...
BannerAd _bannerAd;BannerAd createBannerAd() { return BannerAd( adUnitId: BannerAd.testAdUnitId, size: AdSize.smartBanner, listener: (MobileAdEvent event) { print('BannerAd event $event'); }, );}

2. Initialize FirebaseAdMob instance:

@overridevoid initState() {   super.initState();   FirebaseAdMob.instance      //.initialize(appId: 'ca-app-pub-##############');       .initialize(appId: appId);   _bannerAd = createBannerAd()      ..load()      ..show(anchorType: AnchorType.bottom);}

3. Display Ad inside a Widget:

@overrideWidget build(BuildContext context) {    // 10 second timer to show ad banner   Timer(Duration(seconds: 10), () {   _bannerAd?.show();  });....

Conclusion:

I couldn’t find an easy setup, so I wrote this tutorial to display Ad Banner on the bottom of an Android app. Thanks for reading. I started to publish my daily notes. Let me know if I’m wrong somewhere or if there’s something that could do differently or better. I’m open to your feedback 🙌🏻

-Andres

software engineer, read, swim, travel. apps: https://goo.gl/rDuuQw https://goo.gl/15GvfE

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store