Adding AdMob ads to a Flutter app

Adding AdMob Ads to a Flutter App: A Complete Guide

Monetizing your mobile app with Google AdMob is a popular choice among Flutter developers. AdMob provides an easy way to integrate various ad formats like banner ads, interstitial ads, and rewarded ads, which can help generate revenue for your Flutter application.

In this guide, we’ll walk through how to set up AdMob in Flutter and implement these three ad types. By the end, you’ll have a fully functioning Flutter app with integrated ads that can help you start monetizing your app right away.

Prerequisites

Basic understanding of Flutter and Dart.
Access to a Google AdMob account. If you don’t have one, sign up for AdMob.
Installed Flutter SDK (2.0+).

Step 1: Setting Up AdMob

1.1. Register Your App in AdMob

Go to AdMob and sign in.
Click on Apps > Add app.
Select Add app manually and follow the prompts to create your app.
Note down the App ID as you will need this later.

1.2. Create Ad Units

After creating your app, go to Apps > Your App > Ad units.
Create the ad units for each ad type you plan to use:
- Banner Ad
- Interstitial Ad
- Rewarded Ad
Note down the Ad Unit IDs for each ad type.

Step 2: Add AdMob to Flutter

2.1. Add `google_mobile_ads` Package

In your pubspec.yaml file, add the google_mobile_ads package, which is the official plugin for AdMob in Flutter.

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^2.0.1

After adding the dependency, run:

flutter pub get

2.2. Update `AndroidManifest.xml` and `Info.plist`

For Android:

Open the AndroidManifest.xml file located at android/app/src/main/AndroidManifest.xml.
Inside the <application> tag, add your AdMob App ID:
- <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="YOUR_ADMOB_APP_ID" />

For iOS:

Open the Info.plist file located at ios/Runner/Info.plist.
Add your AdMob App ID:
- <key>GADApplicationIdentifier</key> <string>YOUR_ADMOB_APP_ID</string>

Step 3: Initialize AdMob in Flutter

In your main Dart file (e.g., main.dart), initialize the GoogleMobileAds SDK before running the app.

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

Step 4: Implement Banner, Interstitial, and Rewarded Ads

4.1. Banner Ads

Banner ads are simple, static ads that appear at the top or bottom of the screen.

Create a BannerAd instance.

BannerAd bannerAd = BannerAd(
  adUnitId: 'YOUR_BANNER_AD_UNIT_ID',
  request: AdRequest(),
  size: AdSize.banner,
  listener: BannerAdListener(
    onAdLoaded: (_) => print('Banner Ad Loaded'),
    onAdFailedToLoad: (ad, error) {
      ad.dispose();
      print('Banner Ad Failed to Load: $error');
    },
  ),
)..load();

2. Display the banner ad using AdWidget.

Container(
  alignment: Alignment.bottomCenter,
  child: AdWidget(ad: bannerAd),
  width: bannerAd.size.width.toDouble(),
  height: bannerAd.size.height.toDouble(),
)

4.2. Interstitial Ads

Interstitial ads are full-screen ads that display at natural breaks in the app, such as between game levels.

Load an InterstitialAd when the app starts.

InterstitialAd? interstitialAd;

void loadInterstitialAd() {
  InterstitialAd.load(
    adUnitId: 'YOUR_INTERSTITIAL_AD_UNIT_ID',
    request: AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (ad) => interstitialAd = ad,
      onAdFailedToLoad: (error) => print('Interstitial Failed to Load: $error'),
    ),
  );
}

2. Display the interstitial ad at appropriate moments.

void showInterstitialAd() {
  if (interstitialAd != null) {
    interstitialAd!.show();
    interstitialAd = null; // Dispose after showing
    loadInterstitialAd(); // Load a new ad for future use
  }
}

4.3. Rewarded Ads

Rewarded ads offer users incentives for watching, like in-game currency or points.

Load a RewardedAd when the app starts.

RewardedAd? rewardedAd;

void loadRewardedAd() {
  RewardedAd.load(
    adUnitId: 'YOUR_REWARDED_AD_UNIT_ID',
    request: AdRequest(),
    rewardedAdLoadCallback: RewardedAdLoadCallback(
      onAdLoaded: (ad) => rewardedAd = ad,
      onAdFailedToLoad: (error) => print('Rewarded Ad Failed to Load: $error'),
    ),
  );
}

2. Show the rewarded ad and provide a callback for when the user earns a reward.

void showRewardedAd() {
  if (rewardedAd != null) {
    rewardedAd!.show(
      onUserEarnedReward: (ad, reward) {
        print('Reward earned: ${reward.amount} ${reward.type}');
      },
    );
    rewardedAd = null; // Dispose after showing
    loadRewardedAd(); // Load a new ad for future use
  }
}

Best Practices and Tips

Test with Test Ads: Use test ads during development to avoid accidental invalid clicks on real ads. Replace the adUnitId with BannerAd.testAdUnitId, InterstitialAd.testAdUnitId, or RewardedAd.testAdUnitId as needed.
Manage Ad Load and Display: Load ads in advance and only display them at natural breaks to improve the user experience.
Handle Failures Gracefully: Ad loading can fail due to network issues or other reasons. Use callbacks to handle loading errors gracefully and ensure ads are reloaded.

Conclusion

Integrating AdMob into a Flutter app can significantly enhance your app’s monetization potential. By following this guide, you’ve learned how to add banner ads, interstitial ads, and rewarded ads to your app, allowing you to provide a valuable experience to users while generating revenue. Make sure to follow best practices, and don’t forget to analyze your ad performance in the AdMob dashboard to optimize your ad strategy!

Explore Other Flutter Topics…

Adding AdMob ads to a Flutter app