Many developers use advertising to monetize their mobile apps and games. This allows their app to be downloaded free of charge, which improves the app's popularity.

To add ads to your Flutter project, useAdMob, Google's mobile advertising platform. This recipe demonstrates how to use thegoogle_mobile_ads package to add a banner ad to your app or game.

1. Go toAdMob and set up an account. This could take some time because you need to provide banking information, sign contracts, and so on.

2. With the AdMob account ready, create twoApps in AdMob: one for Android and one for iOS.

3. Open theApp settings section.

4. Get the AdMobApp IDs for both the Android app and the iOS app. They resembleca-app-pub-1234567890123456~1234567890. Note the tilde (~) between the two numbers.

   

Update your Android and iOS configurations to include your App IDs.

Add your AdMob app ID to your Android app.

1. Open the app'sandroid/app/src/main/AndroidManifest.xml file.

2. Add a new<meta-data> tag.

3. Set theandroid:name element with a value ofcom.google.android.gms.ads.APPLICATION_ID.

4. Set theandroid:value element with the value to your own AdMob app ID that you got in the previous step. Include them in quotes as shown:

   xml

   <manifest><application>...​<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713--><meta-dataandroid:name="com.google.android.gms.ads.APPLICATION_ID"android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/></application></manifest>

   content_copy

Add your AdMob app ID to your iOS app.

1. Open your app'sios/Runner/Info.plist file.

2. EncloseGADApplicationIdentifier with akey tag.

3. Enclose your AdMob app ID with astring tag. You created this AdMob App ID instep 1.

   xml

   <key>GADApplicationIdentifier</key><string>ca-app-pub-################~##########</string>

   content_copy

To add thegoogle_mobile_ads plugin as a dependency, runflutter pub add:

$flutter pub add google_mobile_ads

Error while merging dex archives:The number of method references in a .dex file cannot exceed 64K.

You need to initialize the Mobile Ads SDK before loading ads.

1. CallMobileAds.instance.initialize() to initialize the Mobile Ads SDK.

   dart

   voidmain()async{WidgetsFlutterBinding.ensureInitialized();unawaited(MobileAds.instance.initialize());​runApp(constMyApp());}

   content_copy

Run the initialization step at startup, as shown above, so that the AdMob SDK has enough time to initialize before it is needed.

To show an ad, you need to request it from AdMob.

To load a banner ad, construct aBannerAd instance, and callload() on it.

/// Loads a banner ad.void_loadAd(){finalbannerAd=BannerAd(size:widget.adSize,adUnitId:widget.adUnitId,request:constAdRequest(),listener:BannerAdListener(// Called when an ad is successfully received.onAdLoaded:(ad){if(!mounted){ad.dispose();return;}setState((){_bannerAd=adasBannerAd;});},// Called when an ad request failed.onAdFailedToLoad:(ad,error){debugPrint('BannerAd failed to load:$error');ad.dispose();},),);​// Start loading.bannerAd.load();}

Once you have a loaded instance ofBannerAd, useAdWidget to show it.

AdWidget(ad:_bannerAd)

It's a good idea to wrap the widget in aSafeArea (so that no part of the ad is obstructed by device notches) and aSizedBox (so that it has its specified, constant size before and after loading).

@overrideWidgetbuild(BuildContextcontext){returnSafeArea(child:SizedBox(width:widget.adSize.width.toDouble(),height:widget.adSize.height.toDouble(),child:_bannerAd==null// Nothing to render yet.?constSizedBox()// The actual ad.:AdWidget(ad:_bannerAd!),),);}

You must dispose of an ad when you no longer need to access it. The best practice for when to calldispose() is either after theAdWidget is removed from the widget tree or in theBannerAdListener.onAdFailedToLoad() callback.

_bannerAd?.dispose();

To show anything beyond test ads, you have to register ad units.

1. OpenAdMob.

2. Create anAd unit for each of the AdMob apps.

   

   This asks for the Ad unit's format. AdMob provides many formats beyond banner ads --- interstitials, rewarded ads, app open ads, and so on. The API for those is similar, and documented in theAdMob documentation and throughofficial samples.

3. Choose banner ads.

4. Get theAd unit IDs for both the Android app and the iOS app. You can find these in theAd units section. They look something likeca-app-pub-1234567890123456/1234567890. The format resembles theApp ID but with a slash (/) between the two numbers. This distinguishes anAd unit ID from anApp ID.

   

5. Add theseAd unit IDs to the constructor ofBannerAd, depending on the target app platform.

   dart

   finalStringadUnitId=Platform.isAndroid// Use this ad unit on Android...?'ca-app-pub-3940256099942544/6300978111'// ... or this one on iOS.:'ca-app-pub-3940256099942544/2934735716';

   content_copy

To display the ads in a published app or game (as opposed to debug or testing scenarios), your app must meet additional requirements:

1. Your app must be reviewed and approved before it can fully serve ads. Follow AdMob'sapp readiness guidelines. For example, your app must be listed on at least one of the supported stores such as Google Play Store or Apple App Store.

2. You mustcreate anapp-ads.txt file and publish it on your developer website.

To learn more about app and game monetization, visit the official sites ofAdMob andAd Manager.

The following code implements a simple stateful widget that loads a banner ad and shows it.

import'dart:io';​import'package:flutter/widgets.dart';import'package:google_mobile_ads/google_mobile_ads.dart';​classMyBannerAdWidgetextendsStatefulWidget{/// The requested size of the banner. Defaults to [AdSize.banner].finalAdSizeadSize;​/// The AdMob ad unit to show.////// TODO: replace this test ad unit with your own ad unitfinalStringadUnitId=Platform.isAndroid// Use this ad unit on Android...?'ca-app-pub-3940256099942544/6300978111'// ... or this one on iOS.:'ca-app-pub-3940256099942544/2934735716';​MyBannerAdWidget({super.key,this.adSize=AdSize.banner});​@overrideState<MyBannerAdWidget>createState()=>_MyBannerAdWidgetState();}​class_MyBannerAdWidgetStateextendsState<MyBannerAdWidget>{/// The banner ad to show. This is `null` until the ad is actually loaded.BannerAd?_bannerAd;​@overrideWidgetbuild(BuildContextcontext){returnSafeArea(child:SizedBox(width:widget.adSize.width.toDouble(),height:widget.adSize.height.toDouble(),child:_bannerAd==null// Nothing to render yet.?constSizedBox()// The actual ad.:AdWidget(ad:_bannerAd!),),);}​@overridevoidinitState(){super.initState();_loadAd();}​@overridevoiddispose(){_bannerAd?.dispose();super.dispose();}​/// Loads a banner ad.void_loadAd(){finalbannerAd=BannerAd(size:widget.adSize,adUnitId:widget.adUnitId,request:constAdRequest(),listener:BannerAdListener(// Called when an ad is successfully received.onAdLoaded:(ad){if(!mounted){ad.dispose();return;}setState((){_bannerAd=adasBannerAd;});},// Called when an ad request failed.onAdFailedToLoad:(ad,error){debugPrint('BannerAd failed to load:$error');ad.dispose();},),);​// Start loading.bannerAd.load();}​}