Cette page a été traduite par l'API Cloud Translation.

Modèles natifs dans Dart

Les modèles natifs sont des vues complètes de code pour vos annonces natives, et les modifier facilement. Avec les modèles natifs, le plug-in fournit des mises en page Android et iOS prédéfinies, et vous pouvez personnaliser le style des éléments natifs à l'aide de l'API Dart.

Ce guide explique comment utiliser l'API Dart pour styliser les éléments des vues de la plate-forme et pour afficher l'annonce.

Prérequis

Flutter 2.4.0 ou version ultérieure.

Suivez le guide de démarrage.
Familiarisez-vous avec les options d'annonces natives.

Toujours tester avec des annonces tests

Lorsque vous créez et testez vos applications, assurez-vous d'utiliser des annonces tests plutôt que des annonces de production. Le moyen le plus simple de charger des annonces tests consiste à utiliser notre ID du bloc d'annonces test pour les annonces natives:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Les blocs d'annonces tests sont configurés pour renvoyer des annonces tests pour chaque demande. vous pouvez les utiliser dans vos propres applications pendant que vous codez, testez et le débogage. Veillez simplement à les remplacer par vos propres ID de bloc d'annonces publier votre application.

Charger l'annonce

L'exemple suivant charge une annonce native à l'aide de la taille d'annonce native medium. modèle:

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();
  }
}

Voir NativeTemplateStyle et NativeTemplateTextStyle pour connaître les options de style disponibles.

Personnaliser l'annonce

Lorsque vous personnalisez une annonce native à l'aide de modèles natifs, la configuration de l'UI de votre annonce se trouvera dans la classe NativeTemplateStyle, ce qui vous permettra d'appliquer un style à l'intégralité d'une native en code Dart.

Tailles des modèles

Il existe deux types de modèles d'annonces natives Flutter: TemplateType.small et TemplateType.medium Le petit modèle est idéal pour une TableView GridView, pour les annonces In-Feed ou tous ceux où vous avez besoin d'un affichage rectangulaire. La moyen est censé afficher une page vue de la moitié au 3 quarts, ce qui idéale pour les pages de destination ou de démarrage.

Petite
Android	iOS
Moyenne
Android	iOS

Événements d'annonces natives

Pour être informé des événements liés aux interactions avec les annonces natives, utilisez la listener de l'annonce. Ensuite, implémentez NativeAdListener pour recevoir des rappels d'événements d'annonce.

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();
  }
}

Annonce display

Pour afficher un NativeAd en tant que widget, vous devez instancier un élément AdWidget avec une annonce compatible après avoir appelé load(). Vous pouvez créer le widget avant Appeler load(), mais load() doit être appelé avant de l'ajouter au widget arbre.

AdWidget hérite de la classe Widget de Flutter et peut être utilisé comme n'importe quelle autre . Sur iOS, veillez à placer le widget dans un conteneur avec un nom la largeur et la hauteur. Sinon, votre annonce risque de ne pas s'afficher.

// 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!),
);

Supprimer l'annonce

A NativeAd doivent être supprimées lorsque l'accès à celui-ci n'est plus nécessaire. La bonne pratique pour Quand appeler dispose() est postérieur à la valeur AdWidget associée à l'annonce native est supprimé de l'arborescence des widgets et de AdListener.onAdFailedToLoad(). .

Étapes suivantes

Pour en savoir plus sur les annonces natives, consultez notre annonce native playbook.
Consultez les Règles relatives aux annonces natives et consignes.
Témoignages de clients: étude de cas 1, étude de cas 2.

Exemple complet sur GitHub

Modèles natifs