Flutterexperts

In flutter, there is always a scope of improvement as we all know it is growing rapidly in App’s world and many of us also want to develop an app which could also show external thing like an advertisement, an advertisement can consist many intentions like to promote something, to give general instructions, and also to seek some reviews, By the way, we had a glance over the uses of ads but the important part for a developer is the implementation of it.

So let’s understand how to implement it:

To implement Ad Mob in your app you first need to create an account into Google Ad Mob and after creating it you will find this screen

now you need to click on ADD APP if you want to create a new ad for your app then a window will appear on your screen asking “Have you published your app on Google Play or App Store” choose your option Yes or No and move forward and you will find a screen mentioning Enter Your App Information

Here you need to enter your app name and platform according to you, and then you move forward and you get an option to create an ad unit

when you move forward by clicking on CREATE AD UNIT you get a window of all types ads unit you can implement on your screen

after selecting any unit like Banner, Interstitial, etc you move forward to Configure ad unit setting, here you select a name for your ad unit and also you can customize your ad with all the available options

and when your app ad unit is created you are done with it, its time to link the app with firebase.

For this go to App setting, here you will see Link to Firebase option

after clicking on Link to Firebase, and we need to do it separately by adding package name and bundle id respectively for android and ios, then you need to select the existing project in which you want to implement

now you are done with ad mob part now let’s move to the Flutter part

you first need to dependency in your yaml file

admob_flutter: "^latest version"

Import is now in your dart code

import 'package:admob_flutter/admob_flutter.dart';

after that need to make some changes in android and ios part,

First, we will discuss the android part, here we need to make changes in manifest.xml file, we add these two lines of metadata in the manifest file and we would put our app id of add mob in the value field

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

same in the ios we add this code into the info.plist and we would put our app id of add mob in the value field

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

for example

Android

iOS

Now we make a class where we put app ids and banner ids according to the platform.

https://gist.github.com/shivanchalpandey/11a57191419930baa9c84f89427737c5#file-admob_services-dart

now let’s understand to set up an ad banner on the screen, first, we are initializing ids in initState() and later using the AdmobBanner widget to show the banner in the list as you can see this in code below.

https://gist.github.com/shivanchalpandey/11a57191419930baa9c84f89427737c5#file-admob_services-dart

Now after implementing everything correctly you will have a banner between the list. So that’s it from my side.

you can find the source code from here::

flutter-devs/admob_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.

---

Feel free to connect with us
And read more articles from FlutterDevs.com

---

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.