Add Google Admob Ads To Your Flutter APP 2020 ~ TIPS AND TECHS

ADD GOOGLE ADMOB ADS TO YOUR FLUTTER APP (BEST AND EASY WAY)

n this tutorial, I will show you how to Implement Admob ads in a Flutter app by using Firebase_admob packages to easily implement ads into a Flutter app. As we can say Flutter is Fast & Really Easy Way to Make Android apps. In This Tutorial, I am Going to show Demo Ads by Admob like Banner Ads & Interstitial Ads.

Google Admob is an Easy Way to Monetize your Android and iOS apps, which will generate revenue from your app. Google Admob can be Displayed Banner Ads, Interstitial Ads & Video Ads. Google Admob is the Prime Monetization Platform for iOS and Android apps.

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

We’re going to begin by adding a firebase_admob package to our dependencies in our pubspec.yaml file:

And press Ctrl + S Get flutter package get with exit code 0

Its Demo Ads. Not For Real One

This guide will explain to you understand, how to Implement Admob Ads in a flutter. It’s Important to enable Demo Ads during Development So that you can click on them without Violate ‘Admob Policy‘. Disclaimer Don’t click on your Own Real Admob Ads either it will violate Admob Policy by Google

For Android User, AndroidManifest changes:

You Need to Add the Following Line in the androidmanifest.xml to Avoid crash on the launch of your Android app

<meta-data                                                    
    android:name="com.google.android.gms.ads.APPLICATION_ID"   
    android:value="[ADMOB_APP_ID]"/>

For iOS User, Info.plist changes:

You Need to Add the Following line Info.plist to Avoid Crash on the launch of your iOS App

<key>GADApplicationIdentifier</key>                           
<string>[ADMOB_APP_ID]</string>

Add import 'package:firebase_admob/firebase_admob.dart';

into main.dart just below material.dart line.

Create one const String variable & give an Empty Space Or Write 'Mobile_id'

const String testDevice = 'Mobile_id';

Okay After that Create MobileAdTargetingInfo for implementing Keyword, test devices & nonPersonalizedAds.

After that, We Created Two Variables First BannerAd & Second Variable For Interstitial Ads

static const MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
testDevices: testDevice != null ? <String>[testDevice] : null,
nonPersonalizedAds: true,
keywords: <String>['Game', 'Mario'],
);
BannerAd _bannerAd;
InterstitialAd _interstitialAd;
//Banner Ads
BannerAd createBannerAd() {
return BannerAd(
adUnitId: BannerAd.testAdUnitId,
//Change BannerAd adUnitId with Admob ID
size: AdSize.banner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("BannerAd $event");
});
}
//Interstitial Ads
InterstitialAd createInterstitialAd() {
return InterstitialAd(
adUnitId: InterstitialAd.testAdUnitId,
//Change Interstitial AdUnitId with Admob ID
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("IntersttialAd $event");
});
}

view raw main.dart hosted with ❤ by GitHub

After that, We are going to create initState for initializing Our Banners Ads whenever User Open Flutter apps it will automatically Initialize Banner ads in the Bottom Bar

@override
void initState() {
FirebaseAdMob.instance.initialize(appId: BannerAd.testAdUnitId);
//Change appId With Admob Id
_bannerAd = createBannerAd()
..load()
..show();
super.initState();
}
@override
void dispose() {
_bannerAd.dispose();
_interstitialAd.dispose();
super.dispose();
}

view raw main.dart hosted with ❤ by GitHub

After Creating InitState We need to implement RaisedButton where we are going to initialized Interstitial Ads

In the RaisedButton, On Onpressed button add Properties like to Load Interstitial Ads

Full Code:

import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';
const String testDevice = 'MobileId';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
static const MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
testDevices: testDevice != null ? <String>[testDevice] : null,
nonPersonalizedAds: true,
keywords: <String>['Game', 'Mario'],
);
BannerAd _bannerAd;
InterstitialAd _interstitialAd;
BannerAd createBannerAd() {
return BannerAd(
adUnitId: BannerAd.testAdUnitId,
//Change BannerAd adUnitId with Admob ID
size: AdSize.banner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("BannerAd $event");
});
}
InterstitialAd createInterstitialAd() {
return InterstitialAd(
adUnitId: InterstitialAd.testAdUnitId,
//Change Interstitial AdUnitId with Admob ID
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("IntersttialAd $event");
});
}
@override
void initState() {
FirebaseAdMob.instance.initialize(appId: BannerAd.testAdUnitId);
//Change appId With Admob Id
_bannerAd = createBannerAd()
..load()
..show();
super.initState();
}
@override
void dispose() {
_bannerAd.dispose();
_interstitialAd.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(),
home: Scaffold(
appBar: AppBar(
title: Text("Demo App"),
),
body: Center(
child: RaisedButton(
child: Text('Click on Ads'),
onPressed: () {
createInterstitialAd()
..load()
..show();
},
)),
),
);
}
}

view raw main.dart hosted with ❤ by GitHub

You can see the full source code of the project here.

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything, I’ll do my best to answer it.