Dart 中的原生广告模板

原生广告模板是原生广告的完整代码视图,旨在实现快速 轻松进行修改有了原生广告模板,插件 预构建的 Android 和 iOS 布局,您还可以自定义 使用 Dart API 来自定义原生资源。

本指南演示了如何使用 Dart API 设置 平台视图并呈现广告。

前提条件

  • Flutter 2.4.0 或更高版本。

始终使用测试广告进行测试

在构建和测试应用时,请务必使用测试广告 实际投放的广告。要加载测试广告,最简便的方法就是使用我们的专用 原生广告的测试广告单元 ID:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

测试广告单元已配置为为每个请求返回测试广告 您可以在自己的应用中使用这些库,同时编写、测试和 请务必先使用您自己的广告单元 ID 替换这些广告单元 ID,然后再 发布应用。

加载广告

以下示例使用尺寸为 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();
  }
}

请参阅 NativeTemplateStyleNativeTemplateTextStyle 了解可用的样式选项。

定制广告

使用原生广告模板自定义原生广告时,广告的界面配置 将位于 NativeTemplateStyle 类中,使您能够为整个地图添加样式 添加原生广告

模板尺寸

Flutter 原生广告模板有两种类型:TemplateType.smallTemplateType.medium。小模板非常适合TableViewGridView,适用于信息流广告或需要细长方形广告视图的任何位置。通过 中等模板是指网页浏览量的一半到四分之三 是着陆页或启动页的理想之选。


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 显示为 widget,您必须实例化 AdWidget 并在调用 load() 后返回受支持的广告。你可以先创建微件 调用 load(),但必须先调用 load(),然后才能将其添加到 widget 中 树。

AdWidget 继承自 Flutter 的 Widget 类,可以像其他任何类一样使用 微件。在 iOS 上,务必将 widget 放置在具有指定 宽度和高度。否则,您的广告可能不会展示。

// 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!),
);

处理广告

NativeAd (在不再需要访问时必须予以处置)。对于 调用 dispose() 的时间晚于原生广告所关联的 AdWidget 从 widget 树和 AdListener.onAdFailedToLoad() 中移除 回调。

后续步骤

GitHub 上的完整示例

原生广告模板