Banner

Los anuncios de banner ocupan un espacio determinado en la interfaz de una aplicación, ya sea en la parte superior de la pantalla del dispositivo o en la inferior. Permanecen en ella mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un periodo de tiempo determinado.

En esta guía te mostramos cómo integrar anuncios de banner de AdMob en aplicaciones de Flutter. Además de fragmentos de código e instrucciones, encontrarás información sobre cómo definir el tamaño adecuado para los banners.

Comprobar siempre las aplicaciones con anuncios de prueba

Cuando crees y testes tus aplicaciones, utiliza siempre anuncios de prueba en lugar de anuncios reales que se estén publicando. De lo contrario, podríamos suspender tu cuenta.

La forma más sencilla de cargar anuncios de prueba es usar el ID de bloque de anuncios de prueba que hemos creado para evaluar los banners:

Los bloques de anuncios de prueba están configurados para devolver anuncios de prueba a cada solicitud, y puedes usarlos para programar, testar y depurar tus propias aplicaciones. Recuerda sustituirlos por los IDs de tus bloques de anuncios antes de publicar las aplicaciones.

Crear instancias de anuncios

Los elementos BannerAd requieren los objetos adUnitId, AdSize, AdRequest y BannerAdListener. En el siguiente ejemplo se crea una instancia de un anuncio de banner:

final BannerAd myBanner = BannerAd(
  adUnitId: '<ad unit ID>',
  size: AdSize.banner,
  request: AdRequest(),
  listener: BannerAdListener(),
);

En esta tabla se muestran los tamaños de banner estándar.

Tamaño en dp (anchura x altura) Descripción Constante de AdSize
320x50 Banner estándar banner
320x100 Banner grande largeBanner
320x250 Rectángulo mediano mediumRectangle
468x60 Banner de tamaño completo fullBanner
728x90 Leaderboard leaderboard
Anchura de pantalla x 32|50|90 Banner inteligente Usar getSmartBanner(Orientation)

Para definir un tamaño de banner personalizado, especifica el tamaño que quieras mediante la función AdSize:

final AdSize adSize = AdSize(300, 50);

Puedes usar BannerAdListener para procesar eventos del ciclo de vida, como cuándo se carga un anuncio. En este ejemplo, se implementa cada método y se registra un mensaje en la consola:

final BannerAdListener listener = BannerAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
);

Cargar anuncios

Después de crear una instancia de BannerAd, se debe llamar a load() antes de que se pueda mostrar en la pantalla:

myBanner.load();

Mostrar anuncios

Para mostrar un BannerAd como un widget, debes crear una instancia de AdWidget con un anuncio compatible después de llamar a load(). Puedes crear el widget antes de llamar a load(), pero se debe hacer una llamada a load() antes de añadirlo al árbol de widgets.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget hereda los valores de la clase Widget de Flutter y se puede utilizar como cualquier otro widget. En el caso de iOS, asegúrate de colocar el widget dentro de un widget con una altura y una anchura determinadas. De lo contrario, es posible que no se muestre el anuncio. Se puede colocar un BannerAd en un contenedor que tenga un tamaño que coincida con el del anuncio:

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

Cuando un anuncio haya llamado a load(), debe llamar a dispose() cuando ya no se necesite acceso a él. El mejor momento para llamar a dispose() es después de que se quite AdWidget del árbol de widgets, o bien en la retrollamada AdListener.onAdFailedToLoad.

Eso es todo. La aplicación ya está lista para mostrar anuncios de banner.