Flutter AdMob Banner Ads Example Source Code

Here I explain how to integrate Flutter AdMob Banner Ads in our android application to make money via advertisements. Actually in the Flutter framework only little bit hard to integrate the Google AdMob, because here there is no XML features are available. In the Android Studio Native Java platform using XML concept for deign the layouts, so we can easily check out preview and able to place on exact places.

However Flutter (Dart) Integration also easy but need some technical knowledge for placing ads in our application. Fewer documentation only available and official docs also helps to get the better idea for further integrations. Therefore I hope surely this article helps to integrate Google AdMob Banner Ads, Interstitial & Rewarded Videos. Moreover Native ads also available on official domain but there is not demo code for implement into real time.

Also Read – E Learning App Flutter

Flutter AdMob Banner Ads Integration

Just follow my below steps to integrate AdMob ads on your android application. Before explain my code, once you have to check it out official steps for completing this tasks on your end. Because they are clearly explained like what are the things done from our end.

Official Steps to Integrate AdMob Ads into Flutter Apps

Open pubspec.yaml File

Initially we have to add the Google Ads dependency for further steps. Then only able to show the number of ads in our application.

google_mobile_ads: ^3.0.0

Open Androidmanifest.xml File

And then you have to add Google AdMob Id for further configuration steps. So you have to add below dependencies on your code. After that we can call and insert ads into our android or iOS application.

<meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>

Add Helper Class for Integration (lib/ad_helper.dart)

Now you have to create new Dart file under Lib folder, you can give any name for the particular file. After that you have to copy the below code.

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw new UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/5224354917";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/1712485313";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Hereafter open our project files where we have to add the ads. To do that you have to add below code on every file where we show ads in our application.

Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }

To know more details visit Live CodeLab.

Video Demo – Flutter AdMob Ads

Leave a Reply