原生广告模板是原生广告的完整代码视图,旨在实现快速 轻松进行修改有了原生广告模板,插件 系统为您预构建了 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();
}
}
请参阅
NativeTemplateStyle
和
NativeTemplateTextStyle
了解可用的样式选项。
定制广告
使用原生广告模板自定义原生广告时,广告的界面配置
将位于 NativeTemplateStyle
类中,使您能够为整个地图添加样式
添加原生广告
模板尺寸
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 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()
中移除
回调。
后续步骤
- 要详细了解原生广告,请参阅我们的原生广告 playbook。
- 请参阅原生广告政策和 指南。
- 查看一些客户成功案例: 案例研究 1、 案例研究 2.