Native Vorlagen in Dart

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.

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 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 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

Vollständiges Beispiel auf GitHub

Native Vorlagen