Flutter Firebase Admob Examples

Flutter firebase admob: How To Examples

Introduction

Firebase AdMob is a mobile advertising platform that allows developers to monetize their Flutter applications by displaying ads. The firebase_admob package provides a Flutter plugin for integrating AdMob into your Flutter projects. In this tutorial, we will explore various examples of using the firebase_admob package to display different types of ads in a Flutter application.

Installation

To get started, you need to add the firebase_admob package to your Flutter project. Open your project's pubspec.yaml file and add the following dependency:

dependencies:
  firebase_admob: ^0.11.0+1

Save the file and run flutter pub get to fetch the package.

The banner ad is a rectangular ad that is displayed at the bottom of the screen. It can be used to display ads in a non-intrusive manner. To display a banner ad, follow these steps:

Import the firebase_admob package:

import 'package:firebase_admob/firebase_admob.dart';

Initialize the AdMob instance:

MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
  keywords: <String>['flutter', 'admob'],
  contentUrl: 'https://flutter.dev',
  childDirected: false,
  testDevices: <String>[],
);
FirebaseAdMob.instance.initialize(appId: 'YOUR_ADMOB_APP_ID');

Replace YOUR_ADMOB_APP_ID with your AdMob app ID.

Create a BannerAd instance:

BannerAd bannerAd = BannerAd(
  adUnitId: BannerAd.testAdUnitId,
  size: AdSize.banner,
  targetingInfo: targetingInfo,
);

Use BannerAd.testAdUnitId for testing purposes.

Load and show the ad:

bannerAd
    .load()
    .then((value) => bannerAd.show(anchorType: AnchorType.bottom));

The banner ad will now be displayed at the bottom of the screen.

Example 2: Interstitial Ad

Interstitial ads are full-screen ads that are displayed at natural transition points in your application. They are typically used to display ads between levels of a game or when the user completes a task. To display an interstitial ad, follow these steps:

Initialize the AdMob instance (same as in Example 1).

Create an InterstitialAd instance:

InterstitialAd interstitialAd = InterstitialAd(
  adUnitId: InterstitialAd.testAdUnitId,
  targetingInfo: targetingInfo,
);

Use InterstitialAd.testAdUnitId for testing purposes.

Load and show the ad:
```
interstitialAd.load().then((value) => interstitialAd.show());
```
The interstitial ad will now be displayed as a full-screen overlay.

Example 3: Rewarded Video Ad

Rewarded video ads are full-screen ads that offer users rewards in exchange for watching the entire ad. They are commonly used to provide in-app rewards or unlock additional content. To display a rewarded video ad, follow these steps:

Initialize the AdMob instance (same as in Example 1).

Create a RewardedVideoAd instance:

RewardedVideoAd rewardedVideoAd = RewardedVideoAd(
  adUnitId: RewardedVideoAd.testAdUnitId,
  targetingInfo: targetingInfo,
);

Use RewardedVideoAd.testAdUnitId for testing purposes.

Load and show the ad:
```
rewardedVideoAd.load().then((value) => rewardedVideoAd.show());
```
The rewarded video ad will now be displayed as a full-screen overlay.

Example 4: Native Ad

Native ads are custom-designed ads that blend seamlessly with the app's user interface. They are typically used to display ads within a list view or a grid view. To display a native ad, follow these steps:

Initialize the AdMob instance (same as in Example 1).

Create a NativeAd instance:

NativeAd nativeAd = NativeAd(
  adUnitId: NativeAd.testAdUnitId,
  factoryId: 'adFactoryExample',
  targetingInfo: targetingInfo,
  customOptions: <String, Object>{},
);

Use NativeAd.testAdUnitId for testing purposes.

NativeAdFactory exampleAdFactory = MyAdFactory();
FirebaseAdMob.instance.registerNativeAdFactory(
  'adFactoryExample',
  exampleAdFactory,
);

Replace MyAdFactory with your own implementation of NativeAdFactory.

Load and show the ad:
```
nativeAd.load().then((value) => nativeAd.show());
```
The native ad will now be displayed within the app's user interface.

Example 5: Ad Listener

You can add an ad listener to receive events and updates about the ads being displayed. This can be useful for tracking the ad lifecycle and handling user interactions. To add an ad listener, follow these steps:

Initialize the AdMob instance (same as in Example 1).
Create a BannerAd instance (or any other ad type).

Add an ad listener:

bannerAd.listener = (MobileAdEvent event) {
  if (event == MobileAdEvent.loaded) {
    print('Ad loaded successfully!');
  } else if (event == MobileAdEvent.failedToLoad) {
    print('Ad failed to load.');
  }
};

You can handle different events such as MobileAdEvent.loaded, MobileAdEvent.failedToLoad, MobileAdEvent.clicked, etc.

Load and show the ad (same as in Example 1).
The ad listener will now receive events and print messages accordingly.

Conclusion

In this tutorial, we explored various examples of using the firebase_admob package to display different types of ads in a Flutter application. We covered banner ads, interstitial ads, rewarded video ads, native ads, and adding an ad listener. By following these examples, you can easily integrate AdMob into your Flutter projects and start monetizing your applications.

Introduction​

Installation​

Example 1: Banner Ad​

Example 2: Interstitial Ad​

Example 3: Rewarded Video Ad​

Example 4: Native Ad​

Example 5: Ad Listener​

Conclusion​