Dart 中的原生广告模板
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
原生广告模板是原生广告的完整代码视图，旨在加快广告植入速度并简化修改过程。借助原生广告模板，插件可为您提供预构建的 Android 和 iOS 版式，并且您可以使用 DART API 来自定义原生素材资源的样式。
本指南演示了如何使用 DART API 来设置底层平台视图的样式并呈现广告。
前提条件
务必用测试广告进行测试
在构建和测试应用时，请确保使用的是测试广告，而不是实际投放的广告。对于原生广告，加载测试广告最简便的方法就是使用我们的专用测试广告单元 ID：
/21775744923/example/native
这些 ID 已经过专门配置，可针对每个请求返回测试广告。您可以在编码、测试和调试期间，在自己的应用中随意使用这些 ID，不过请务必在发布应用之前，将这些 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 _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。
自定义广告
使用原生广告模板自定义原生广告时，广告的界面配置将位于 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();
}
}
展示广告
如需以 widget 形式展示 NativeAd，您在调用 load() 之后，必须实例化含有受支持广告的 AdWidget。您可以在调用 load() 之前创建 widget，但必须先调用 load()，然后才能将 widget 添加到 widget 树中。
AdWidget 继承自 Flutter 的 Widget 类，可以像其他任何 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() 回调函数中调用。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-08-31。
[null,null,["最后更新时间 (UTC)：2025-08-31。"],[[["\u003cp\u003eNative Templates offer pre-built layouts for Android and iOS, customizable through a Dart API, streamlining native ad implementation.\u003c/p\u003e\n"],["\u003cp\u003eFlutter provides two native ad template sizes, \u003ccode\u003esmall\u003c/code\u003e and \u003ccode\u003emedium\u003c/code\u003e, suitable for various ad placements, such as in-feed or landing pages.\u003c/p\u003e\n"],["\u003cp\u003eNative ad styling can be achieved using the \u003ccode\u003eNativeTemplateStyle\u003c/code\u003e and \u003ccode\u003eNativeTemplateTextStyle\u003c/code\u003e classes in Dart, offering granular control over visual elements.\u003c/p\u003e\n"],["\u003cp\u003eTo display the native ad, instantiate an \u003ccode\u003eAdWidget\u003c/code\u003e with the loaded \u003ccode\u003eNativeAd\u003c/code\u003e and place it within a \u003ccode\u003eConstrainedBox\u003c/code\u003e to define its dimensions.\u003c/p\u003e\n"],["\u003cp\u003eEnsure to dispose of the \u003ccode\u003eNativeAd\u003c/code\u003e using the \u003ccode\u003edispose()\u003c/code\u003e method when it's no longer needed, such as after removing the associated \u003ccode\u003eAdWidget\u003c/code\u003e from the widget tree.\u003c/p\u003e\n"]]],["Native templates provide prebuilt Android and iOS layouts for native ads, customizable via a Dart API. To use, load an ad with `NativeAd`, specifying an ad unit ID and listener for events. Customize the ad's appearance through `NativeTemplateStyle`, choosing from `small` or `medium` template sizes. Display the ad using an `AdWidget` within a `ConstrainedBox`. Ensure ads are tested with provided test ad unit IDs and disposed of properly after use to free up resources.\n"],null,["# Native templates in Dart\n\nSelect platform: [Android](/ad-manager/mobile-ads-sdk/android/native/templates \"View this page for the Android platform docs.\") [iOS](/ad-manager/mobile-ads-sdk/ios/native/templates \"View this page for the iOS platform docs.\") [Flutter](/ad-manager/mobile-ads-sdk/flutter/native/templates \"View this page for the Flutter platform docs.\")\n\n\u003cbr /\u003e\n\nNative templates are code-complete views for your native ads, designed for fast\nimplementation and easy modification. With native templates, the plugin provides\nprebuilt Android and iOS layouts for you, and you can customize the style of the\nnative assets using a Dart API.\n\nThis guide demonstrates how to use the Dart API to stylize the underlying\nplatform views and to render the ad.\n\nPrerequisites\n-------------\n\n- Flutter 2.4.0 or higher.\n\n\u003c!-- --\u003e\n\n- Complete the [Get started guide](/ad-manager/mobile-ads-sdk/flutter/quick-start).\n- Familiarize yourself with the [native ads options](/ad-manager/mobile-ads-sdk/flutter/native).\n\nAlways test with test ads\n-------------------------\n\nWhen building and testing your apps, make sure you use test ads rather than\nlive, production ads. The easiest way to load test ads is to use our dedicated\ntest ad unit ID for native ads:\n\n- `/21775744923/example/native`\n\nThe test ad units are configured to return test ads for every request, so\nyou can use them in your own apps while coding, testing, and\ndebugging---just make sure you replace them with your own ad unit IDs before\npublishing your app.\n\nLoad ad\n-------\n\nThe following example loads a native ad using the `medium` sized native\ntemplate: \n\n class NativeExampleState extends State\u003cNativeExample\u003e {\n NativeAd? nativeAd;\n bool _nativeAdIsLoaded = false;\n\n // TODO: replace this test ad unit with your own ad unit.\n final _adUnitId = '/21775744923/example/native';\n\n /// Loads a native ad.\n void loadAd() {\n _nativeAd = NativeAd(\n adUnitId: _adUnitId,\n listener: NativeAdListener(\n onAdLoaded: (ad) {\n debugPrint('$NativeAd loaded.');\n setState(() {\n _nativeAdIsLoaded = true;\n });\n },\n onAdFailedToLoad: (ad, error) {\n // Dispose the ad here to free resources.\n debugPrint('$NativeAd failed to load: $error');\n ad.dispose();\n },\n ),\n request: const AdManagerAdRequest(),\n // Styling\n nativeTemplateStyle: NativeTemplateStyle(\n // Required: Choose a template.\n templateType: TemplateType.medium,\n // Optional: Customize the ad's style.\n mainBackgroundColor: Colors.purple,\n cornerRadius: 10.0,\n callToActionTextStyle: NativeTemplateTextStyle(\n textColor: Colors.cyan,\n backgroundColor: Colors.red,\n style: NativeTemplateFontStyle.monospace,\n size: 16.0),\n primaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.red,\n backgroundColor: Colors.cyan,\n style: NativeTemplateFontStyle.italic,\n size: 16.0),\n secondaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.green,\n backgroundColor: Colors.black,\n style: NativeTemplateFontStyle.bold,\n size: 16.0),\n tertiaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.brown,\n backgroundColor: Colors.amber,\n style: NativeTemplateFontStyle.normal,\n size: 16.0)))\n ..load();\n }\n }\n\nSee\n[`NativeTemplateStyle`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeTemplateStyle-class.html)\nand\n[`NativeTemplateTextStyle`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeTemplateTextStyle-class.html)\nfor available styling options.\n\nCustomize ad\n------------\n\nWhen customizing a native ad using native templates, your ad's UI configuration\nwill live in the `NativeTemplateStyle` class, enabling you to style an entire\nnative ad in Dart code.\n\n### Template sizes\n\nFlutter native ad templates come in two types: `TemplateType.small` and\n`TemplateType.medium`. The small template is ideal for a `TableView` or\n`GridView`, for in-feed ads or anywhere you need a thin rectangular ad view. The\nmedium template is meant to be a half to three-quarters page view, which is\nideal for landing or splash pages.\n\n| Small |\n|-------------|---------|\n| **Android** | **iOS** |\n| **Android** | **iOS** |\n\nNative ad events\n----------------\n\nTo be notified of events related to the native ad interactions, use the\n[`listener`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeAd/listener.html)\nproperty of the ad. Then, implement\n[`NativeAdListener`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeAdListener-class.html)\nto receive ad event callbacks. \n\n class NativeExampleState extends State\u003cNativeExample\u003e {\n NativeAd? _nativeAd;\n bool _nativeAdIsLoaded = false;\n\n // TODO: replace this test ad unit with your own ad unit.\n final _adUnitId = '/21775744923/example/native';\n\n /// Loads a native ad.\n void loadAd() {\n _nativeAd = NativeAd(\n adUnitId: _adUnitId,\n listener: NativeAdListener(\n onAdLoaded: (ad) {\n print('$NativeAd loaded.');\n setState(() {\n _nativeAdIsLoaded = true;\n });\n },\n onAdFailedToLoad: (ad, error) {\n // Dispose the ad here to free resources.\n print('$NativeAd failedToLoad: $error');\n ad.dispose();\n },\n // Called when a click is recorded for a NativeAd.\n onAdClicked: (ad) {},\n // Called when an impression occurs on the ad.\n onAdImpression: (ad) {},\n // Called when an ad removes an overlay that covers the screen.\n onAdClosed: (ad) {},\n // Called when an ad opens an overlay that covers the screen.\n onAdOpened: (ad) {},\n // For iOS only. Called before dismissing a full screen view\n onAdWillDismissScreen: (ad) {},\n // Called when an ad receives revenue value.\n onPaidEvent: (ad, valueMicros, precision, currencyCode) {},\n ),\n request: const AdManagerAdRequest(),\n // Styling\n nativeTemplateStyle: NativeTemplateStyle(\n // Required: Choose a template.\n templateType: TemplateType.medium,\n // Optional: Customize the ad's style.\n mainBackgroundColor: Colors.purple,\n cornerRadius: 10.0,\n callToActionTextStyle: NativeTemplateTextStyle(\n textColor: Colors.cyan,\n backgroundColor: Colors.red,\n style: NativeTemplateFontStyle.monospace,\n size: 16.0),\n primaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.red,\n backgroundColor: Colors.cyan,\n style: NativeTemplateFontStyle.italic,\n size: 16.0),\n secondaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.green,\n backgroundColor: Colors.black,\n style: NativeTemplateFontStyle.bold,\n size: 16.0),\n tertiaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.brown,\n backgroundColor: Colors.amber,\n style: NativeTemplateFontStyle.normal,\n size: 16.0)))\n ..load();\n }\n }\n\nDisplay ad\n----------\n\nTo display a `NativeAd` as a widget, you must instantiate an\n[`AdWidget`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/AdWidget-class.html)\nwith a supported ad after calling `load()`. You can create the widget before\ncalling `load()`, but `load()` must be called before adding it to the widget\ntree.\n\n`AdWidget` inherits from Flutter's `Widget` class and can be used like any other\nwidget. On iOS, make sure you place the widget in a container with a specified\nwidth and height. Otherwise, your ad may not be displayed. \n\n // Small template\n final adContainer = ConstrainedBox(\n constraints: const BoxConstraints(\n minWidth: 320, // minimum recommended width\n minHeight: 90, // minimum recommended height\n maxWidth: 400,\n maxHeight: 200,\n ),\n child: AdWidget(ad: _nativeAd!),\n );\n\n // Medium template\n final adContainer = ConstrainedBox(\n constraints: const BoxConstraints(\n minWidth: 320, // minimum recommended width\n minHeight: 320, // minimum recommended height\n maxWidth: 400,\n maxHeight: 400,\n ),\n child: AdWidget(ad: _nativeAd!),\n );\n\nDispose ad\n----------\n\nA\n[`NativeAd`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeAd-class.html)\nmust be disposed of when access to it is no longer needed. The best practice for\nwhen to call `dispose()` is after the `AdWidget` associated with the native ad\nis removed from the widget tree and in the `AdListener.onAdFailedToLoad()`\ncallback."]]
