How to Integrate Google AdMob in Flutter

Google AdMob allows you to monetize your Flutter app by displaying ads. This guide will walk you through the process step by step.

Step 1: Set Up AdMob Account and Create an App

1. Go to AdMob and sign in.
2. Click Apps > Add app and follow the instructions.
3. Once your app is created, note the App ID (you’ll need it later).
4. Create an Ad Unit (e.g., Banner, Interstitial, Rewarded, etc.) and note its Ad Unit ID.

Step 2: Add Dependencies to pubspec.yaml

Add the following package:

dependencies:
  google_mobile_ads: latest_version

Run:

flutter pub get

Step 3: Configure Android and iOS

Android

1. Open android/app/src/main/AndroidManifest.xml and add your AdMob App ID inside <application>:

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

2. Ensure minSdkVersion is at least 19 in android/app/build.gradle.

defaultConfig {
    minSdkVersion 19
}

iOS

1. Open ios/Runner/Info.plist and add:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX</string>

2. Add these permissions (if not already present):

<key>SKAdNetworkItems</key>
<array>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cstr6suwn9.skadnetwork</string>
    </dict>
</array>

3. Run:

cd ios
pod install

Step 4: Initialize Google Mobile Ads in main.dart

Modify your main.dart:

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

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

Step 5: Display an Ad

1. Banner Ad

Add this widget where you want to show a banner ad:

import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerAdWidget extends StatefulWidget {
  @override
  _BannerAdWidgetState createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  late BannerAd _bannerAd;
  bool _isAdLoaded = false;

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

    _bannerAd = BannerAd(
      size: AdSize.banner,
      adUnitId: 'ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX', // Replace with your Ad Unit ID
      listener: BannerAdListener(
        onAdLoaded: (ad) => setState(() => _isAdLoaded = true),
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          print('Failed to load banner ad: $error');
        },
      ),
      request: AdRequest(),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return _isAdLoaded
        ? Container(
            height: 50,
            child: AdWidget(ad: _bannerAd),
          )
        : SizedBox.shrink();
  }

  @override
  void dispose() {
    _bannerAd.dispose();
    super.dispose();
  }
}

2. Interstitial Ad

To show a full-screen ad:

class AdHelper {
  static InterstitialAd? _interstitialAd;

  static void loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: 'ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX', // Replace with your Ad Unit ID
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) => _interstitialAd = ad,
        onAdFailedToLoad: (error) => _interstitialAd = null,
      ),
    );
  }

  static void showInterstitialAd() {
    if (_interstitialAd != null) {
      _interstitialAd!.show();
      _interstitialAd = null; // Load a new ad after showing
      loadInterstitialAd();
    }
  }
}

Call AdHelper.loadInterstitialAd(); in initState() and AdHelper.showInterstitialAd(); when needed.

Step 6: Test Ads

To avoid policy violations, use test ad unit IDs while developing:

• Banner: ca-app-pub-3940256099942544/6300978111
• Interstitial: ca-app-pub-3940256099942544/1033173712
• Rewarded: ca-app-pub-3940256099942544/5224354917

Conclusion

Now you can display ads in your Flutter app and monetize it.