向您的移動 Flutter 應用或遊戲新增廣告

許多開發者使用廣告來將他們的移動應用程式和遊戲變現。這使得他們的應用程式可以免費下載，從而提高了應用程式的普及度。

要將廣告新增到您的 Flutter 專案，請使用 AdMob，Google 的移動廣告平臺。本教程演示瞭如何使用 google_mobile_ads 包將橫幅廣告新增到您的應用程式或遊戲中。

1. 前往 AdMob 並設定帳戶。這可能需要一些時間，因為您需要提供銀行資訊、簽署合同等。

2. 準備好 AdMob 帳戶後，在 AdMob 中建立兩個應用：一個用於 Android，一個用於 iOS。

3. 開啟 應用設定 部分。

4. 獲取 Android 應用和 iOS 應用的 AdMob 應用 ID。它們類似於 ca-app-pub-1234567890123456~1234567890。請注意兩個數字之間的波浪線 (~)。

   

更新您的 Android 和 iOS 配置，以包含您的應用 ID。

將您的 AdMob 應用 ID 新增到您的 Android 應用程式。

1. 開啟應用程式的 android/app/src/main/AndroidManifest.xml 檔案。

2. 新增一個新的 <meta-data> 標籤。

3. 將 android:name 元素設定為 com.google.android.gms.ads.APPLICATION_ID。

4. 將 android:value 元素設定為您在上一步中獲得的 AdMob 應用 ID。如所示，將它們包含在引號中

   xml

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

   content_copy

將您的 AdMob 應用 ID 新增到您的 iOS 應用程式。

1. 開啟您的應用程式的 ios/Runner/Info.plist 檔案。

2. 用 key 標籤將 GADApplicationIdentifier 括起來。

3. 用 string 標籤將您的 AdMob 應用 ID 括起來。您在 步驟 1 中建立了這個 AdMob 應用 ID。

   xml

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

   content_copy

要將 google_mobile_ads 外掛新增為依賴項，請執行 flutter pub add

$ flutter pub add google_mobile_ads

您需要在載入廣告之前初始化移動廣告 SDK。

1. 呼叫 MobileAds.instance.initialize() 來初始化移動廣告 SDK。

   dart

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     unawaited(MobileAds.instance.initialize());
   ​
     runApp(const MyApp());
   }
   

   content_copy

在啟動時執行初始化步驟，如上所示，以便 AdMob SDK 有足夠的時間在需要之前進行初始化。

要顯示廣告，您需要從 AdMob 請求它。

要載入橫幅廣告，請構造一個 BannerAd 例項，並在其上呼叫 load()。

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

要檢視完整的示例，請檢視本教程的最後一步。

一旦您擁有載入的 BannerAd 例項，請使用 AdWidget 來顯示它。

AdWidget(ad: _bannerAd)

將小部件包裝在 SafeArea 中（這樣裝置劉海不會遮擋廣告的任何部分）和 SizedBox 中（這樣它在載入之前和之後都具有指定的固定大小）是一個好主意。

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: SizedBox(
      width: widget.adSize.width.toDouble(),
      height: widget.adSize.height.toDouble(),
      child: _bannerAd == null
          // Nothing to render yet.
          ? const SizedBox()
          // The actual ad.
          : AdWidget(ad: _bannerAd!),
    ),
  );
}

當您不再需要訪問廣告時，必須銷燬它。呼叫 dispose() 的最佳實踐是在 AdWidget 從小部件樹中移除後或在 BannerAdListener.onAdFailedToLoad() 回撥中。

_bannerAd?.dispose();

要顯示除測試廣告之外的任何廣告，您必須註冊廣告單元。

1. 開啟 AdMob。

2. 為每個 AdMob 應用程式建立一個廣告單元：一個用於 Android，一個用於 iOS。

   

   這會要求提供廣告單元的格式。AdMob 提供了許多超出橫幅廣告的格式 --- 中插廣告、獎勵廣告、應用開啟廣告等。這些 API 類似，並在 AdMob 文件 和 官方示例 中進行了記錄。

3. 選擇橫幅廣告。

4. 獲取 Android 應用程式和 iOS 應用程式的廣告單元 ID。您可以在 廣告單元 部分找到這些 ID。它們看起來像 ca-app-pub-1234567890123456/1234567890。該格式類似於應用 ID，但兩個數字之間有一個斜槓 (/)。這區分了廣告單元 ID 和應用 ID。

   

5. 將這些廣告單元 ID 新增到 BannerAd 的建構函式中，具體取決於目標應用程式平臺。

   dart

   final String adUnitId = 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

要在已釋出的應用程式或遊戲中顯示廣告（而不是除錯或測試場景），您的應用程式必須滿足其他要求

1. 您的應用程式必須經過稽核和批准才能完全投放廣告。遵循 AdMob 的 應用準備指南。例如，您的應用程式必須至少列在受支援的商店之一，例如 Google Play 商店或 Apple App Store。

2. 您必須 建立一個 app-ads.txt 檔案並將其釋出在您的開發者網站上。

要了解有關應用程式和遊戲變現的更多資訊，請訪問 AdMob 和 Ad Manager 的官方網站。

以下程式碼實現了一個簡單的有狀態小部件，該小部件載入橫幅廣告並顯示它。

import 'dart:io';
​
import 'package:flutter/widgets.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
​
class MyBannerAdWidget extends StatefulWidget {
  /// The requested size of the banner. Defaults to [AdSize.banner].
  final AdSize adSize;
​
  /// The AdMob ad unit to show.
  ///
  /// TODO: replace this test ad unit with your own ad unit
  final String adUnitId = 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});
​
  @override
  State<MyBannerAdWidget> createState() => _MyBannerAdWidgetState();
}
​
class _MyBannerAdWidgetState extends State<MyBannerAdWidget> {
  /// The banner ad to show. This is `null` until the ad is actually loaded.
  BannerAd? _bannerAd;
​
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: widget.adSize.width.toDouble(),
        height: widget.adSize.height.toDouble(),
        child: _bannerAd == null
            // Nothing to render yet.
            ? const SizedBox()
            // The actual ad.
            : AdWidget(ad: _bannerAd!),
      ),
    );
  }
​
  @override
  void initState() {
    super.initState();
    _loadAd();
  }
​
  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }
​
  /// Loads a banner ad.
  void _loadAd() {
    final bannerAd = BannerAd(
      size: widget.adSize,
      adUnitId: widget.adUnitId,
      request: const AdRequest(),
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          if (!mounted) {
            ad.dispose();
            return;
          }
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, error) {
          debugPrint('BannerAd failed to load: $error');
          ad.dispose();
        },
      ),
    );
​
    // Start loading.
    bannerAd.load();
  }
​
}