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 vorgefertigte Android- und iOS-Layouts. Sie können den Stil der nativen Assets mit 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 Erstellen und Testen Ihrer Apps Testanzeigen anstelle von aktiven 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 Test-Anzeigenblöcke sind so konfiguriert, dass bei jeder Anfrage Testanzeigen zurückgegeben werden. Sie können sie also in Ihren eigenen Apps beim Codieren, Testen und Entwickeln verwenden. Achten Sie jedoch darauf, sie vor der Veröffentlichung Ihrer App durch Ihre eigenen Anzeigenblock-IDs zu ersetzen.
Anzeige laden
Im folgenden Beispiel wird eine native Anzeige mit der nativen Vorlage 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 Flutter-Vorlagen für native 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
Wenn Sie über Ereignisse informiert werden möchten, die sich auf die Interaktionen mit nativen Anzeigen beziehen, verwenden Sie das Attribut 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
Wenn du eine NativeAd als Widget anzeigen möchtest, musst du nach dem Aufruf 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 dem Widget-Baum hinzugefügt wird.
AdWidget erbt von der Widget-Klasse von Flutter und kann wie jedes andere Widget verwendet werden. Achten Sie unter iOS darauf, das Widget in einem Container mit einer bestimmten Breite und Höhe zu platzieren. 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. Am besten rufen Sie dispose() auf, nachdem das mit der nativen Anzeige verknüpfte AdWidget aus dem Widget-Baum entfernt wurde, und im AdListener.onAdFailedToLoad()-Callback.
Nächste Schritte
- Weitere Informationen zu nativen Anzeigen finden Sie in unserem Playbook zu nativen Anzeigen.
- Weitere Informationen finden Sie in den Richtlinien für native Anzeigen.
- Hier finden Sie einige Erfolgsgeschichten von Kunden: Fallstudie 1, Fallstudie 2.