How to display Google AdMob ads in your flutter app using a 'firebase

How to display Google AdMob ads in your flutter app using a 'firebase_admob' plugin?

Hii Developers...

In this article, I will explain to you about How to display Google AdMob ads in your flutter app using a firebase_admob plugin.

What is Google AdMob?

Google Admob is a super amazing tool for worldwide android and ios app developers to make money by placing Google ads in their app.
Google Admob is a medium for developers to make money. Google AdMob is the number one option for placing ads in the market.
Google Admob helps you by maximizing your revenue.

How AdMob works :-

Different types of Ads are created by many advertisers.when you create empty space for ads in your android or ios app,
AdMob works with many advertisers who pay you to show their ads that are relevant to your app users.

Google Admob Ads formats :-

Rewarded Ads: Rewarded Ads are those ads that users can watch, and users of that app can get bonus points, Extra coins, or Extra life. So users watch those ads to survive in that game.
Rewarded ads are usually used with gaming-related apps.
Native Ads: Native ads are the customized ads that look like a part of your app.
Banner Ads: Banner ads are the ads which look like rectangular ads that can be aligned to the bottom or top of the screen of the app.
Interstitial Ads: Interstitial ads are the video ads or just like full screen banner ads.

You May Also like:- How to create Tinder Swipe Cards in Flutter using 'flutter_tindercard' package ?

How to use Google Admob with a flutter app?

Step By Step:-

1) First, we need to create an account in AdMob console. ( https://admob.google.com/home/ )

how to display google admob ads in android app

AdMob Console

2) After creating an account we need to create an app.
3) Click on the app Button.
4) Click on Add App Button.
5) If you have any publisher account such as play store so click on yes button otherwise click on no button
6) Enter your app name, select an appropriate platform, and click on the "ADD" button.
7) After Creating App click on the "Create AD unit" button, create one Interstitial app.
8) we need to use the "firebase_admob" package so goto the "firebase_admob" package. ( https://pub.dev/packages/firebase_admob )
9) Copy the dependency "firebase_admob: ^0.9.3+2" and paste it in pubspec.yml file.

firebase_admob dependency

10) Import the package "import 'package:firebase_admob/firebase_admob.dart';" in main.dart file.
12) Goto the AndroidManifest.xml file and paste the code
13) We need two buttons so when we click on that button Banner Ad and Interstitial Ads will be shown.
14) We need to put the MobileAdTargetingInfo, BannerAd, and InterstitialAd code in initState, so when app loads it will automatically call that code.
15) create custom methods to show the banner and Interstitial ads, when we click on the button ads will be shown.
16) Change the anchorOffset: 60.0 to anchorOffset: 1.0, so the banner ad will be touche to bottom of the screen.

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

13) Replace the ( android:value="[ADMOB_APP_ID]" ) with the app id that we just created in admob console.

Video Tutorial:-

Whole Code:-

import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
MobileAdTargetingInfo targetingInfo;
BannerAd myBanner;
InterstitialAd myInterstitial;

@override
void initState() {
super.initState();

targetingInfo = MobileAdTargetingInfo(
keywords: <String>['flutterio', 'beautiful apps'],
contentUrl: 'https://flutter.io',
birthday: DateTime.now(),
childDirected: false,
designedForFamilies: false,
gender: MobileAdGender.male,
testDevices: <String>[],
);

myBanner = BannerAd(
adUnitId: BannerAd.testAdUnitId,
size: AdSize.smartBanner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("BannerAd event is $event");
},
);

myInterstitial = InterstitialAd(
adUnitId: InterstitialAd.testAdUnitId,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("InterstitialAd event $event");
},
);

}

void show_banner_ads(){
myBanner
..load()
..show(
anchorOffset: 1.0,
horizontalCenterOffset: 0.0,
anchorType: AnchorType.bottom,
);

}
void show_interstial_ads(){
myInterstitial
..load()
..show(
anchorType: AnchorType.bottom,
anchorOffset: 0.0,
horizontalCenterOffset: 0.0,
);

}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Admob Tutorial",
theme: ThemeData(
primaryColor: Colors.orange,
),
home: Scaffold(
appBar: AppBar(
title: Text("Admob Tutorial"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
show_banner_ads();
},
child: Text("Show Banner Ads"),
),
RaisedButton(
onPressed: () {
show_interstial_ads();
},
child: Text("Show Interstial Ads"),
)
],
),
),
),
);
}
}

You may also like:- How to Create a Music Player app in flutter using Firebase (Cloud firestore,firebase storage) and 'music_player' plugin ?

Thank you guys for spending your valuable time in reading this article, if you have any doubts please ask me those doubts in the comment section below.

How to display Google AdMob ads in your flutter app using a 'firebase_admob' plugin?