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

許多開發者透過廣告來實現移動應用和遊戲的商業化。這使得他們的應用可以免費下載，從而提升應用的受歡迎程度。

若要為您的 Flutter 專案新增廣告，請使用 Google 的移動廣告平臺 AdMob。本指南演示瞭如何使用 google_mobile_ads 包為您的應用或遊戲新增橫幅廣告。

1. 前往 AdMob 並建立一個賬戶。此過程可能需要一些時間，因為您需要提供銀行資訊、簽署合同等。

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

3. 開啟應用設定部分。

4. 獲取 Android 和 iOS 應用的 AdMob 應用 ID (App IDs)。它們看起來像 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 應用建立一個廣告單元 (Ad unit)。

   

   系統會詢問廣告單元的格式。除了橫幅廣告外，AdMob 還提供許多其他格式——插頁式廣告、激勵廣告、開屏廣告等。它們的 API 類似，並在 AdMob 文件和官方示例中進行了說明。

3. 選擇橫幅廣告。

4. 獲取 Android 和 iOS 應用的廣告單元 ID (Ad unit IDs)。您可以在廣告單元部分找到它們。它們看起來像 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();
  }
​
}