Banner

Los anuncios de banner ocupan un lugar dentro del diseño de la aplicación, ya sea en la parte superior o inferior de la pantalla del dispositivo. Permanecen en la pantalla mientras los usuarios interactúan con la app. y se pueden actualizar automáticamente después de cierto período.

En esta guía, se muestra cómo integrar anuncios de banner de AdMob en un App de Flutter. Además de los fragmentos de código y las instrucciones, también incluye información sobre el tamaño adecuado de los banners.

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. De lo contrario, podría suspenderse tu cuenta.

La forma más sencilla de cargar anuncios de prueba es usar nuestro ID exclusivo de unidad de anuncios de prueba para banners:

ca-app-pub-3940256099942544/6300978111

ca-app-pub-3940256099942544/2934735716

Las unidades de anuncios de prueba están configuradas para mostrar anuncios de prueba para cada solicitud. puedes usarlas en tus apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlos con tus propios IDs de unidades de anuncios antes de publicar tu .

Carga un anuncio

En el siguiente ejemplo, se crea una instancia de un anuncio de banner:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

Tamaños de banner

En la siguiente tabla, se indican los tamaños de banner estándar.

Para definir un tamaño de banner personalizado, establece tu AdSize preferido:

final AdSize adSize = AdSize(300, 50);

Eventos de anuncios en forma de banner

Mediante el uso de BannerAdListener, puedes escuchar eventos de ciclo de vida, como como cuando se carga un anuncio. En este ejemplo, se implementa cada método y se registra un mensaje a la consola:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

Muestra un anuncio banner

Para mostrar un BannerAd como widget, debes crear una instancia de 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 widget con un valor especificado ancho y alto. De lo contrario, es posible que tu anuncio no se muestre. Un BannerAd Pueden colocarse en un contenedor con un tamaño que coincida con el del anuncio:

...
if (_bannerAd != null) {
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  )
}
...

Los anuncios deben desecharse cuando ya no se necesite acceder a ellos. La práctica recomendada de cuándo llamar a dispose() es después de que se quita AdWidget de la árbol de widgets o en BannerAdListener.onAdFailedToLoad() devolución de llamada.

Eso es todo. Tu app ya está lista para mostrar anuncios de banner.

Limitación de desplazamiento en Android 9 y versiones anteriores

Sabemos que algunos dispositivos más antiguos o menos potentes que ejecutan Android 9 o es posible que antes tenga un rendimiento deficiente Cuando se muestran anuncios de banner intercalados en vistas con desplazamiento. Solo recomendamos mediante estos tipos de banners en Android 10 o versiones posteriores. banners de posición fija, como ya que los banners fijos no se ven afectados y se pueden usar con un rendimiento óptimo en todos los niveles de API de Android.

Ejemplo completo en GitHub

Banner