Dart 原生範本

原生範本是原生廣告的完整程式碼檢視畫面，可快速導入並輕鬆修改。透過原生範本，外掛程式會為您提供預先建構的 Android 和 iOS 版面配置，您可以使用 Dart API 自訂原生素材資源的樣式。

本指南將示範如何使用 Dart API 為基礎平台檢視畫面設定樣式，並轉譯廣告。

必要條件

  • Flutter 2.4.0 以上版本。

請務必使用測試廣告進行測試

建構及測試應用程式時，請務必使用測試廣告，而非實際的正式版廣告。如要載入測試廣告，最簡單的方法是使用原生廣告專用的測試廣告單元 ID：

  • /21775744923/example/native

測試廣告單元會在每個請求中傳回測試廣告，因此您可以在編寫程式碼、測試及偵錯時，在自己的應用程式中使用這些廣告單元。不過，請務必在發布應用程式前，將這些廣告單元替換為您自己的廣告單元 ID。

載入廣告

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

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

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// 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 AdManagerAdRequest(),
        // 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。

自訂廣告

使用原生範本自訂原生廣告時，廣告的 UI 設定會位於 NativeTemplateStyle 類別中，讓您在 Dart 程式碼中設定整個原生廣告的樣式。

範本大小

Flutter 原生廣告範本分為兩種：TemplateType.small 和 TemplateType.medium。小型範本非常適合用於 TableView 或 GridView，用於動態內廣告或需要狹長矩形廣告檢視畫面的任何位置。中型範本的尺寸為半頁至四分之三，非常適合到達網頁或彈出式網頁。

小

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 _adUnitId = '/21775744923/example/native';

  /// 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 AdManagerAdRequest(),
        // 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 顯示為小工具，您必須在呼叫 load() 後，使用支援的廣告將 AdWidget 例項化。您可以在呼叫 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!),
);

Dispose 廣告

當不再需要存取 NativeAd 時，必須將其處置。如要瞭解何時呼叫 dispose() 的最佳做法，請在與原生廣告相關聯的 AdWidget 從小工具樹狀結構中移除後，在 AdListener.onAdFailedToLoad() 回呼中呼叫 dispose()。