Native Vorlagen sind Code-komplette Ansichten für Ihre nativen Anzeigen, die für eine schnelle Implementierung und einfache Änderung entwickelt wurden. Mit nativen Vorlagen bietet das Plug-in vordefinierte Android- und iOS-Layouts. Sie können den Stil der nativen Assets mithilfe einer Dart API anpassen.
In diesem Leitfaden wird gezeigt, wie Sie mit der Dart API die zugrunde liegenden Plattformansichten stilisieren und die Anzeige rendern.
Vorbereitung
- Flutter 2.4.0 oder höher
- Führen Sie die Schritte im Startleitfaden aus.
- Machen Sie sich mit den Optionen für native Anzeigen vertraut.
Verwenden Sie immer Testanzeigen
Verwenden Sie beim Entwickeln und Testen Ihrer Apps Testanzeigen und keine Produktionsanzeigen. Am einfachsten lassen sich Testanzeigen laden, wenn Sie die spezielle Test-Anzeigenblock-ID für native Anzeigen verwenden:
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. Sie können sie also beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden. Ersetzen Sie sie nur durch Ihre eigenen Anzeigenblock-IDs, bevor Sie Ihre App veröffentlichen.
Anzeige laden
Im folgenden Beispiel wird eine native Anzeige mit der Vorlage mit der Größe medium geladen:
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();
}
}
Unter NativeTemplateStyle und NativeTemplateTextStyle finden Sie die verfügbaren Stiloptionen.
Anzeige anpassen
Wenn Sie eine native Anzeige mithilfe von nativen Vorlagen anpassen, wird die UI-Konfiguration der Anzeige in der Klasse NativeTemplateStyle gespeichert. So können Sie eine gesamte native Anzeige in Dart-Code gestalten.
Vorlagengrößen
Es gibt zwei Arten von Vorlagen für native Flutter-Anzeigen: TemplateType.small und TemplateType.medium. Die kleine Vorlage eignet sich ideal für TableView oder GridView, für In-Feed-Anzeigen oder überall dort, wo eine schmale rechteckige Anzeigenansicht benötigt wird. Die mittlere Vorlage soll ein Seitenaufruf von 50 bis 75 % umfassen, was ideal für Landingpages oder Splashpages ist.
| Klein | |
|---|---|
 Android |
 iOS |
| Mittel | |
 Android |
 iOS |
Ereignisse für native Anzeigen
Um über Ereignisse im Zusammenhang mit den Interaktionen mit nativen Anzeigen informiert zu werden, verwenden Sie die Property listener 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
Damit NativeAd als Widget angezeigt wird, müssen Sie nach dem Aufrufen von load() eine AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget erstellen, bevor Sie load() aufrufen. load() muss jedoch aufgerufen werden, bevor es der Widget-Struktur hinzugefügt wird.
AdWidget wird von der Widget-Klasse von Flutter übernommen und kann wie jedes andere Widget verwendet werden. Unter iOS muss das Widget in einem Container mit einer angegebenen Breite und Höhe platziert werden. Andernfalls wird Ihre Anzeige möglicherweise nicht ausgeliefert.
// 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 entsorgen
Ein NativeAd muss entsorgt werden, wenn der Zugriff darauf nicht mehr erforderlich ist. Als Best Practice wird empfohlen, dispose() aufzurufen, nachdem die AdWidget, die der nativen Anzeige zugeordnet ist, aus der Widget-Struktur und im AdListener.onAdFailedToLoad()-Callback entfernt wurde.
Nächste Schritte
- Weitere Informationen zu nativen Anzeigen finden Sie in unserem Playbook für native Anzeigen.
- Richtlinien für native Anzeigen
- Hier finden Sie einige Erfolgsgeschichten von Kunden: Fallstudie 1, Fallstudie 2.