How to integrate admob Ads into Flutter app - Software Development at Program Tom LTD

Integrating AdMob Ads into a Flutter app involves several steps. AdMob is Google’s mobile advertising platform, and you can use the google_mobile_ads package to integrate it into your Flutter project.

Here’s a step-by-step guide to add AdMob ads (e.g., banner, interstitial, or rewarded ads) to your Flutter app:

1. Set Up AdMob Account & Create Ad Units

Create an account on AdMob.
Register your app in AdMob (iOS and/or Android).
Create ad units for banner ads, interstitial ads, or rewarded video ads.
Copy the ad unit IDs, as you’ll need them later.

2. Add Dependencies

Open your pubspec.yaml file and add the google_mobile_ads dependency:

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^3.0.0 # or the latest version

Run flutter pub get to install the package.

3. Update Android & iOS Configuration

For Android:

Open the android/app/src/main/AndroidManifest.xml file.

Add the following permission and meta-data inside the <manifest> tag:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<application>
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="YOUR_ADMOB_APP_ID"/>
</application>

Replace YOUR_ADMOB_APP_ID with your actual AdMob App ID (from the AdMob console).

TROUBLESHOOTING Android Integrations

You May need to update the version of the plugin
id “org.jetbrains.kotlin.android” version “google what is the latest version and place it here” apply false
You will also need to run this on a device with Google Play Services. I’ve written more about it in another article https://programtom.com/dev/2024/10/25/what-services-are-included-in-google-play-lib/

For iOS:

Open ios/Runner/Info.plist.

Add the following:

<key>GADApplicationIdentifier</key>
<string>YOUR_ADMOB_APP_ID</string>

If you’re targeting iOS 14 or later, add a permission request:

<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>

4. Initialize Google Mobile Ads SDK

In your Flutter app, initialize the Google Mobile Ads SDK before showing any ads. You can do this in the main.dart file.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AdMob Integration')),
        body: Center(child: Text('AdMob Ads Example')),
      ),
    );
  }
}

5. Load and Display Ads

Example: Display a Banner Ad

To display a banner ad, create a BannerAd instance and add it to your widget tree.

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

class MyAdWidget extends StatefulWidget {
  @override
  _MyAdWidgetState createState() => _MyAdWidgetState();
}

class _MyAdWidgetState extends State<MyAdWidget> {
  late BannerAd _bannerAd;
  bool _isBannerAdReady = false;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: 'YOUR_BANNER_AD_UNIT_ID', // Replace with your banner ad unit ID
      request: AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        onAdLoaded: (_) {
          setState(() {
            _isBannerAdReady = true;
          });
        },
        onAdFailedToLoad: (ad, error) {
          print('Failed to load a banner ad: ${error.message}');
          ad.dispose();
        },
      ),
    )..load();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AdMob Banner Example')),
      body: Center(
        child: _isBannerAdReady
            ? Container(
                alignment: Alignment.center,
                width: _bannerAd.size.width.toDouble(),
                height: _bannerAd.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd),
              )
            : Text('Loading Ad...'),
      ),
    );
  }
}

Example: Display an Interstitial Ad

To display an interstitial ad, you create an instance of InterstitialAd and show it at the right moment (e.g., between screens or when a user completes an action).

InterstitialAd? _interstitialAd;

void _createInterstitialAd() {
  InterstitialAd.load(
    adUnitId: 'YOUR_INTERSTITIAL_AD_UNIT_ID', // Replace with your interstitial ad unit ID
    request: AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (InterstitialAd ad) {
        _interstitialAd = ad;
      },
      onAdFailedToLoad: (LoadAdError error) {
        print('InterstitialAd failed to load: $error');
      },
    ),
  );
}

void _showInterstitialAd() {
  if (_interstitialAd != null) {
    _interstitialAd!.show();
  } else {
    print('Interstitial ad is not ready yet.');
  }
}

6. Testing with AdMob Test Ads

When developing, use test ad unit IDs to avoid violating AdMob’s policies.

Banner Test Ad ID: ca-app-pub-3940256099942544/6300978111
Interstitial Test Ad ID: ca-app-pub-3940256099942544/1033173712
Rewarded Test Ad ID: ca-app-pub-3940256099942544/5224354917
Full list of test ids you could read here: https://developers.google.com/admob/android/test-ads

Replace the actual ad unit IDs in your code with the test IDs until you’re ready to go live.

7. Deploy and Monitor

After successfully integrating the ads, you can build and release your app. Make sure to monitor the performance and earnings from the AdMob console.

This should help you integrate AdMob ads into your Flutter app smoothly! To check the latest tutorials from the official source, check out these links: