在你的 Flutter 行動應用程式或遊戲中加入廣告

許多開發者會利用廣告來為他們的行動應用程式或遊戲營利。 這讓他們的應用程式可以免費下載， 進而提升應用程式的普及度。

若要在你的 Flutter 專案中加入廣告，請使用 AdMob， Google 的行動廣告平台。 本教學將示範如何使用 google_mobile_ads 套件，將橫幅廣告（banner ad）加入你的應用程式或遊戲中。

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

2. 帳戶建立完成後，在 AdMob 中建立兩個 應用程式：一個給 Android，一個給 iOS。

3. 開啟 App 設定 區段。

4. 取得 Android 應用程式與 iOS 應用程式的 AdMob App ID。 它們的格式類似 ca-app-pub-1234567890123456~1234567890。請注意 兩組數字之間的波浪號（~）。

   

請更新你的 Android 與 iOS 設定，將你的 App ID 加入其中。

將你的 AdMob App 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 App 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 App ID 加入到你的 iOS 應用程式中。

1. 開啟你的 ios/Runner/Info.plist 檔案。

2. 使用 key 標籤包住 GADApplicationIdentifier。

3. 使用 string 標籤包住你的 AdMob App ID。你已在步驟 1建立此 AdMob App ID。

   xml

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

   content_copy

若要將 google_mobile_ads 插件加入為相依套件，請執行 flutter pub add：

$ flutter pub add google_mobile_ads

在載入廣告之前，你需要先初始化 Mobile Ads SDK。

1. 呼叫 MobileAds.instance.initialize() 來初始化 Mobile Ads 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)

建議將該元件 (Widget) 包裹在 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）該廣告。最佳實踐是在 dispose() 的呼叫時機，通常是在 AdWidget 從元件樹（widget tree）移除之後，或是在 BannerAdListener.onAdFailedToLoad() 回呼（callback）中。

_bannerAd?.dispose();

若要顯示測試廣告以外的內容，你必須註冊廣告單元（Ad unit）。

1. 開啟 AdMob。

2. 為每個 AdMob 應用程式建立一個 廣告單元（Ad unit）。

   

   這會要求你選擇廣告單元的格式。AdMob 提供多種格式， 除了橫幅廣告（banner ads）之外，還有插頁式廣告（interstitials）、獎勵廣告（rewarded ads）、應用程式開啟廣告（app open ads）等。 這些格式的 API 類似，相關說明可參考 AdMob 文件 以及 官方範例。

3. 選擇橫幅廣告（banner ads）。

4. 取得 Android 應用程式與 iOS 應用程式的 廣告單元 ID（Ad unit ID）。 你可以在 Ad units 區段找到這些 ID。它們看起來像 ca-app-pub-1234567890123456/1234567890。格式類似於 App ID，但中間多了一個斜線（/）分隔兩組數字。這樣可以區分 廣告單元 ID（Ad unit ID） 與 App ID。

   

5. 根據目標應用程式平台，將這些 廣告單元 ID（Ad unit 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 Store 或 Apple App Store。

2. 你必須建立 app-ads.txt 檔案並將其發佈於你的開發者網站上。

若想進一步了解應用程式與遊戲的獲利方式， 請造訪 AdMob 與 Ad Manager 的官方網站。

以下程式碼實作了一個簡單的 StatefulWidget（有狀態元件），用於載入並顯示橫幅廣告（banner ad）。

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();
  }
​
}