Plantillas nativas en Dart

Las plantillas nativas son vistas de código completo para sus anuncios nativos, diseñadas para la implementación y la modificación sencilla. Con las plantillas nativas, el complemento proporciona diseños prediseñados de Android y iOS, y puedes personalizar el estilo del recursos nativos con una API de Dart.

En esta guía, se muestra cómo usar la API de Dart para estilizar la imagen y para renderizar el anuncio.

Requisitos previos

  • Flutter 2.4.0 o una versión posterior

Probar siempre con anuncios de prueba

Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios activos y en producción. La forma más sencilla de cargar anuncios de prueba es usar nuestra ID de unidad de anuncios de prueba para anuncios nativos:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Las unidades de anuncios de prueba se configuran para mostrar anuncios de prueba en cada solicitud. puedes usarlas en tus propias apps mientras codificas, pruebas depuración. Solo asegúrese de reemplazarlos con sus propios IDs de unidades de anuncios antes publicar tu app.

Cargar anuncio

En el siguiente ejemplo, se carga un anuncio nativo que usa los anuncios nativos de tamaño medium plantilla:

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

Consulta NativeTemplateStyle y NativeTemplateTextStyle para ver las opciones de estilo disponibles.

Personalizar anuncio

Cuando personaliza un anuncio nativo con plantillas nativas, la configuración de la IU de su anuncio se alojará en la clase NativeTemplateStyle, lo que te permitirá diseñar un conjunto anuncio nativo en código Dart.

Tamaños de plantillas

Las plantillas de anuncios nativos de Flutter vienen en dos tipos: TemplateType.small y TemplateType.medium La plantilla pequeña es ideal para una TableView o GridView, en el caso de los anuncios in-feed o en cualquier lugar donde necesite una vista de anuncio rectangular delgada. El El objetivo de la plantilla mediana es ser una vista de página de entre 0.5 y 0.5 centímetros, ideal para las páginas de destino o de presentación.

Pequeño

Android
iOS
Medio

Android
iOS

Eventos de anuncios nativos

Para recibir notificaciones sobre eventos relacionados con las interacciones con anuncios nativos, usa el listener propiedad del anuncio. Luego, implementa NativeAdListener para recibir devoluciones de llamada de eventos de anuncios.

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

Anuncio gráfico

Para mostrar un NativeAd como widget, debes crear una instancia de una AdWidget con un anuncio compatible después de llamar a load(). Puedes crear el widget antes Llamando a load(), pero se debe llamar a load() antes de agregarlo al widget de imágenes.

AdWidget hereda de la clase Widget de Flutter y se puede usar como cualquier otro widget. En iOS, asegúrate de colocar el widget en un contenedor con un valor ancho y alto. De lo contrario, es posible que tu anuncio no se muestre.

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

Eliminar anuncio

R NativeAd se debe eliminar cuando ya no se necesite el acceso. La práctica recomendada para cuándo llamar a dispose() es posterior al AdWidget asociado con el anuncio nativo se quita del árbol de widgets y en AdListener.onAdFailedToLoad() devolución de llamada.

Próximos pasos

Ejemplo completo en GitHub

Plantillas nativas