Flutter admob tutorial

Flutter AdMob Banner Ads Integration Full Tutorial

In this article, we are going to show you how to integrate flutter AdMob banner ads into your flutter app very easily.

Flutter admob tutorial

Flutter Firebase Admob Example

Firebase AdMob flutter plugin is developed and maintain by the Flutter team. so you can get all the latest updates with support if you use this plugin in your project.

Package: firebase_admob

This flutter plugin support banner ads, interstitial ads, and rewarded video ads using the Firebase AdMob API.

How to install flutter plugins in your project?

to add this plugin to your package’s pubspec.yaml file:

dependencies:
  firebase_admob: ^0.9.0+7

Now run this command in the command line

$ flutter pub get

Import the package where you want to use this

import 'package:firebase_admob/firebase_admob.dart';

In android update your AndroidManifest.xml file by adding this line of code

<manifest>
    <application>
        <!-- TODO: Replace with your real AdMob app ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-################~##########"/>
    </application>
</manifest>

where [ADMOB_APP_ID] is your App ID. You must pass the same value when you initialize the plugin in your Dart code.

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

<dict>
	<key>GADApplicationIdentifier</key>
	<string>ca-app-pub-################~##########</string>
</dict>

where [ADMOB_APP_ID] is your App ID.

Initializing the flutter AdMob plugin

First of all the AdMob plugin must be initialized with an AdMob App ID.

FirebaseAdMob.instance.initialize(appId: appId);

In main.dart file

import 'package:firebase_admob/firebase_admob.dart';

You can also test with your own ad unit IDs by registering your device as a test device. Check the logs for your device’s ID value. for this add this code in main.dart file

const String testDevice = 'YOUR_DEVICE_ID';

You can send Mobile Ad Targeting Info by adding this code into your main.dart file

MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
  keywords: <String>['flutterio', 'beautiful apps'],
  contentUrl: 'https://flutter.io',
  birthday: DateTime.now(),
  childDirected: false,
  designedForFamilies: false,
  gender: MobileAdGender.male, // or MobileAdGender.female, MobileAdGender.unknown
  testDevices: <String>[], // Android emulators are considered test devices
);

Add a variable for banner ads

 BannerAd _bannerAd;

Create banner Ads method

BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      size: AdSize.banner,
      targetingInfo: targetingInfo,
      listener: (MobileAdEvent event) {
        print("BannerAd event $event");
      },
    );
  }

Limitations of This Plugin

This is just an initial version of the plugin. There are still some limitations:

  • Banner ads cannot be animated into view.
  • It’s not possible to specify a banner ad’s size.
  • There’s no support for native ads.
  • The existing tests are fairly rudimentary.
  • There is no API doc.
  • The example should demonstrate how to show gate a route push with an interstitial ad

Leave a Comment

Your email address will not be published. Required fields are marked *