Native Vorlagen sind Code-vollständige Ansichten für native Anzeigen, die für eine schnelle Implementierung und einfache Änderungen konzipiert sind. Bei nativen Vorlagen stellt das Plug-in vorgefertigte Android- und iOS-Layouts für Sie bereit und Sie können den Stil der nativen Assets mithilfe einer Dart API anpassen.
In diesem Leitfaden wird beschrieben, wie Sie mit der Dart API die zugrunde liegenden Plattformansichten stilisieren und die Anzeige rendern.
Voraussetzungen
- 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 Erstellen und Testen Ihrer Apps Testanzeigen anstelle von Produktionsanzeigen. Die einfachste Methode zum Laden von Testanzeigen ist die Verwendung unserer speziellen Anzeigenblock-ID für Testanzeigen für native Anzeigen:
/6499/example/native
Die Testanzeigenblöcke sind so konfiguriert, dass für jede Anfrage Testanzeigen zurückgegeben werden, sodass Sie sie beim Programmieren, Testen und Debuggen in Ihren eigenen Apps verwenden können. Ersetzen Sie sie einfach durch Ihre eigenen Anzeigenblock-IDs, bevor Sie Ihre App veröffentlichen.
Anzeige laden
Im folgenden Beispiel wird eine native Anzeige mit der nativen 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 _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();
}
}
Unter NativeTemplateStyle und NativeTemplateTextStyle finden Sie die verfügbaren Stiloptionen.
Anzeige anpassen
Wenn Sie eine native Anzeige mithilfe nativer Vorlagen anpassen, befindet sich die UI-Konfiguration der Anzeige in der NativeTemplateStyle-Klasse, sodass Sie eine komplette native Anzeige in Dart-Code gestalten können.
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 dünne rechteckige Anzeigenansicht benötigen. Die mittlere Vorlage ist ein Seitenzugriff auf die Hälfte oder drei Viertel, ideal für Landingpages oder Splash-Seiten.
| Klein | |
|---|---|
 Android-Geräte |
 iOS |
| Medium | |
 Android-Geräte |
 iOS |
Ereignisse für native Anzeigen
Wenn Sie über Ereignisse im Zusammenhang mit den Interaktionen mit nativen Anzeigen informiert werden möchten, verwenden Sie die Property listener der Anzeige. Implementieren Sie dann NativeAdListener, um Callbacks 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 _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();
}
}
Displayanzeige
Um ein NativeAd als Widget anzuzeigen, müssen Sie nach dem Aufrufen von load() ein AdWidget mit einer unterstützten Anzeige instanziieren. Sie können das Widget vor dem load()-Aufruf erstellen, aber load() muss aufgerufen werden, bevor es zur Widget-Struktur hinzugefügt wird.
AdWidget wird von der Klasse Widget von Flutter übernommen und kann wie jedes andere Widget verwendet werden. Platzieren Sie das Widget unter iOS in einem Container mit einer bestimmten Breite und Höhe. 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 entsorgen
Ein NativeAd muss entsorgt werden, wenn der Zugriff darauf nicht mehr benötigt wird. Die Best Practice für den Aufruf von dispose() besteht darin, dass die mit der nativen Anzeige verknüpfte AdWidget aus der Widget-Baumstruktur und aus dem AdListener.onAdFailedToLoad()-Callback entfernt wurde.