本頁面由 Cloud Translation API 翻譯而成。

Dart 原生範本

原生範本是程式碼完整的程式碼檢視畫面，專為快速導入而設計導入並輕鬆修改採用原生範本時預先建立的 Android 和 iOS 版面配置，而您也可以自訂透過 Dart API 放送原生素材資源

本指南說明如何使用 Dart API 設定基礎模型並顯示廣告

必要條件

Flutter 2.4.0 以上版本。

完成入門指南。
熟悉原生廣告選項。

一律使用測試廣告進行測試

建構及測試應用程式時，請務必使用測試廣告，而非現場及正式環境廣告若要載入測試廣告，最簡單的方法是使用測試原生廣告的廣告單元 ID：

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

由於測試廣告單元會設為針對每個請求傳回測試廣告，當你在程式設計、測試偵錯 - 您只要先將這些資訊換成自己的廣告單元編號以及如何發布應用程式

載入廣告

以下範例使用 medium 大小的原生廣告載入原生廣告範本：

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

詳情請見 NativeTemplateStyle敬上和 NativeTemplateTextStyle 查看可用的樣式設定選項

自訂廣告

使用原生範本自訂原生廣告時，廣告的使用者介面設定會在 NativeTemplateStyle 類別中發布，方便您為整個設定設定樣式使用 Dart 程式碼設定原生廣告

範本大小

Flutter 原生廣告範本分為兩種類型：TemplateType.small 和 TemplateType.medium。小型範本適合用於 TableView 或 GridView，適用於動態內廣告，或任何需要精簡矩形廣告檢視畫面。中型範本主要是 5-45% 的網頁瀏覽次數適合到達網頁或啟動網頁

小
Android	iOS
中
Android	iOS

原生廣告事件

如要接收與原生廣告互動相關事件的通知，請使用 listener敬上屬性。接著， NativeAdListener敬上接收廣告事件回呼。

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

多媒體廣告

如要以小工具形式顯示 NativeAd，您必須將 AdWidget (呼叫 load() 後使用支援的廣告)你可以先建立小工具呼叫 load()，但必須先呼叫 load()，才能將其新增至小工具。

AdWidget 繼承自 Flutter 的 Widget 類別，且其用途與其他方式相同在 iOS 上，請務必將小工具放在寬度和高度否則您的廣告可能不會顯示。

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

拒登廣告

A 罩杯 NativeAd敬上如果不再需要應用程式，則需處理。學習指南中呼叫 dispose() 的時機在與原生廣告相關聯的 AdWidget 之後已從小工具樹狀結構和 AdListener.onAdFailedToLoad() 中移除回呼。

後續步驟

想進一步瞭解原生廣告，請參閱原生廣告教戰手冊。
請參閱原生廣告政策和指南。
查看一些客戶成功案例：個案研究 1、個案研究 2.

GitHub 上的完整範例

原生範本