There are many ways to make money from a mobile app, and one of them is through advertisement. Running ads on your mobile App is one of the best way to earn money from it. You need to implement Admob adverts to successfully run banner ads on your mobile application.
Here is the step by step process of how to implement Admob adverts to Flutter Applications.
Find admob_flutter: ^0.3.2 by visiting https://pub.dev/.
This tutorial blog will show you how to implement or display a banner ad using admob_flutter plugin.
Follow these steps:
1. Open your Pubspec.yaml.
2. Include admob_flutter package by adding admob_flutter: ^0.3.2 in pubspec.yaml file .
3. Install package from the command line $ flutter pub get
4. Now you need to create App id for admob, you can check the link and can
get the app id https://developers.google.com/admob
5. Configure application with admob account id that can be used within our project. For example “Ca-app-pub-3940256099942544/6300978111”
Now add this ID for both platform (Android and iOS) in your flutter project. For android we need to add this element to the manifest file like below.
<meta-data
android:name=”com.google.android.gms.ads.APPLICATION_ID”
android:value=”ca-app-pub-3940256099942544~1458002511″/>
6. For iOS we need to add same ID within info.plist file.
<key&GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
7. Now import the package and initialize add mob.
import ‘package:admob_flutter/admob_flutter.dart’;
8. Now the configuration setup has been done, we can begin with ads. The flutter_admob package support three different types of ads that can be implemented – banner, Interstitial and reward.
9. AdMob Banner
AdMob banner allows us to display a banner style advertisement within the application. We can use this by adding AdMobBanner widget directly into our widget tree. When user clicks on it, it will take to the user to ad destination.
AdmobBanner(adUnitId: “ca-app-pub-3940256099942544/6300978111”,
adSize: AdmobBannerSize.LARGE_BANNER)
adUnitId – The Advertisement that we want to display.
adSize – This is size of the add. There are different type of banner size
BANNER – 320 * 50 sized
LARGE_BANNER – 320 * 100 sized
MEDIUM_RECTANGLE – 320 * 250 sized
FULL_BANNER – 468 * 60 sized
LEADERBOARD – 728 * 90 sized
SMART_BANNER – this banner can be placed inside any size of the container.
Listener- listener is to listen to the event that occurs around the adMob banner. The callback for this listener provides us an instance of AdmobAdEvent.
AdmobAdEvent can be as follows:
loaded, opened, closed, failed to load, clicked, impression, left application, completed, rewarded, started.
10. Interstitial Ad: This is a full-screen ad that is displayed to the user. To add this we need to initialize AdmobInterstitial. To show how we can initialize it, I have written a small piece of code below. You can check it. Which return AdmobInterstitial, also add the listener to listen AdmobAdEvent. To load the instance of our ad we have to call load() function.
11. _ AdMob interstitial.load();
As we don’t want to show this ad to the user until it has fully loaded, we have to observe the state of the advert, if the advert has been fully loaded, we call show () function to display the ad to the user.
Finally, we are done with an advert now we need to invoke the dispose() function for clean_up.
12. Reward advert
The reward advert can be run if you want to give some reward to the user for watching the ad shown on the screen. To show the reward advert, you need to create a new instance of the AdmobReward class and other things are the same as the Interstitial ad. If the user completes the advert then AdmobEvent.rewarded types allow us to receive a notification when the user is rewarded for watching the advert.
Mobile App Development Services
Do you want to leverage mobile technology for your business? Cynoteck is a one-stop Mobile app Development Services provider. We provide iOS and Android application development services so that you can reach your target audience on any device.
