原生範本是原生廣告的程式碼可完整檢視畫面,專為快速導入與輕鬆修改而設計。使用原生範本時,這個外掛程式會為您提供預先建立的 Android 和 iOS 版面配置,而您也可以使用 Dart API 自訂原生素材資源的樣式。
本指南說明如何使用 Dart API 設定基礎平台檢視畫面的樣式,以及顯示廣告。
必要條件
- Flutter 2.4.0 以上版本。
一律使用測試廣告進行測試
建構及測試應用程式時,請務必使用測試廣告,而非實際製作的廣告。如要載入測試廣告,最簡單的方法是使用我們針對原生廣告測試專用的廣告單元編號:
/6499/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 = '/6499/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 = '/6499/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!),
);
處置廣告
如果您不再需要有存取權,就必須處理 NativeAd
。呼叫 dispose()
時,最佳做法是在從小工具樹狀結構和 AdListener.onAdFailedToLoad()
回呼中移除與原生廣告相關聯的 AdWidget
之後。