原生範本是原生廣告的完整程式碼檢視畫面，可快速導入並輕鬆修改。透過原生範本，外掛程式會為您提供預先建構的 Android 和 iOS 版面配置，您可以使用 Dart API 自訂原生素材資源的樣式。
本指南將示範如何使用 Dart API 為基礎平台檢視畫面設定樣式，並轉譯廣告。
必要條件
- Flutter 2.4.0 以上版本。
請務必使用測試廣告進行測試
建構及測試應用程式時，請務必使用測試廣告，而非實際的正式版廣告。如要載入測試廣告，最簡單的方法是使用原生廣告專用的測試廣告單元 ID：
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
測試廣告單元會在每個請求中傳回測試廣告，因此您可以在編寫程式碼、測試及偵錯時，在自己的應用程式中使用這些廣告單元。不過，請務必在發布應用程式前，將這些廣告單元替換為您自己的廣告單元 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。
自訂廣告
使用原生範本自訂原生廣告時，廣告的 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 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 顯示為小工具，您必須在呼叫 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()。