Native Vorlagen sind Code-vollständige Ansichten für Ihre nativen Anzeigen, die ein schnelles Implementierung und einfache Änderungen. Bei nativen Vorlagen bietet das Plug-in Android- und iOS-Layouts erstellen und den Stil des native Assets mithilfe einer Dart-API.
In diesem Handbuch wird gezeigt, wie Sie mit der Dart API die zugrunde liegende Plattformansichten und zum Rendern der Anzeige.
Vorbereitung
- Flutter 2.4.0 oder höher.
- Arbeiten Sie den Startleitfaden durch.
- Machen Sie sich mit den Optionen für native Anzeigen vertraut.
Immer mit Testanzeigen testen
Verwenden Sie beim Entwickeln und Testen Ihrer Apps nur Testanzeigen, Live-Produktionsanzeigen. Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung Test-Anzeigenblock-ID für native Anzeigen:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Die Testanzeigenblöcke sind so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. können Sie sie beim Programmieren, Testen und ersetzen Sie diese durch Ihre Anzeigenblock-IDs, die Veröffentlichung Ihrer App.
Anzeige laden
Im folgenden Beispiel wird eine native Anzeige mit der Größe medium für native Anzeigen geladen
Vorlage:
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();
}
}
Weitere Informationen finden Sie unter
NativeTemplateStyle
und
NativeTemplateTextStyle
finden Sie die verfügbaren Stiloptionen.
Anzeige anpassen
Wenn Sie eine native Anzeige mithilfe nativer Vorlagen anpassen, muss die UI-Konfiguration der Anzeige
wird in der Klasse "NativeTemplateStyle" angehört. So können Sie ein komplettes
native Anzeige im Dart-Code.
Vorlagengrößen
Es gibt zwei Arten von Vorlagen für native Flutter-Anzeigen: TemplateType.small und
TemplateType.medium. Die kleine Vorlage ist ideal für TableView oder
GridView, für In-Feed-Anzeigen oder überall dort, wo Sie eine schmale rechteckige Anzeigenansicht benötigen. Die
ist bei mittelgroßen Vorlagen ein Seitenaufruf für einen
ideal für Landingpages oder Splash-Seiten.
| Klein | |
|---|---|
 Android |
 iOS |
| Mittel | |
 Android |
 iOS |
Native Anzeigenereignisse
Um über Ereignisse im Zusammenhang mit den Interaktionen mit nativen Anzeigen informiert zu werden, verwenden Sie den
listener
Eigenschaft der Anzeige. Implementieren Sie dann
NativeAdListener
um Rückrufe für Anzeigenereignisse zu erhalten.
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();
}
}
Displayanzeige
Zum Anzeigen eines NativeAd als Widget müssen Sie eine Instanz von
AdWidget
mit einer unterstützten Anzeige nach dem Aufruf von load(). Sie können das Widget vor dem
load() wird aufgerufen, aber load() muss aufgerufen werden, bevor es dem Widget hinzugefügt werden kann
Baum.
AdWidget wird von der Widget-Klasse von Flutter übernommen und kann wie jedes andere verwendet werden
Widget. Unter iOS müssen Sie das Widget in einem Container mit einer angegebenen
Breite und Höhe festlegen. Andernfalls wird Ihre Anzeige möglicherweise nicht geschaltet.
// 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!),
);
Anzeige entfernen
A
NativeAd
müssen entsorgt werden, wenn der Zugriff darauf nicht mehr benötigt wird. Die Best Practice für
wann dispose() nach der AdWidget aufgerufen wird, die der nativen Anzeige zugeordnet ist
wird aus der Widget-Baumstruktur und in der AdListener.onAdFailedToLoad() entfernt
Callback des Nutzers an.
Nächste Schritte
- Weitere Informationen zu nativen Anzeigen finden Sie in unserer Anleitung zu nativen Anzeigen Playbook.
- Weitere Informationen finden Sie in den Richtlinien für native Anzeigen und .
- Kunden-Erfolgsgeschichten ansehen: Fallstudie 1 Fallstudie 2.