Añadir banner con Admob en Flutter

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos añadir un anuncio tipo Banner con Admob en Flutter

Lo primero que vamos a hacer es crear el archivo con nuestros ids de anuncio, para ello tenemos que ir a Admob y obtener el código que nos permitirá añadir el banner.

Ahora vamos a crear este archivo: idsAnuncios.dart

import 'dart:io';

const test = false;

String getIdBanner() {
  var bannerId = "ca-app-pub-3940256099942544/6300978111";
  if (Platform.isAndroid) {
    if (!test) {
      //Anuncios reales
      bannerId = "tu_id_anuncio_banner_ANDROID";
    } else {
      //Anuncios de test
      bannerId = "ca-app-pub-3940256099942544/6300978111";
    }
  } else if (Platform.isIOS) {
    if (!test) {
      //Anuncios reales
      bannerId = "tu_id_anuncio_banner_iOS";
    } else {
      //Anuncios de test
      bannerId = "ca-app-pub-3940256099942544/2934735716";
    }
  }
  return bannerId;
}

Hemos añadido una variable que nos permitirá poner los anuncios en modo prueba.

Hemos añadido el id de anuncios de test de Banner que ofrece Admob por defecto.

Además asignamos los anuncios para Android y para iOS.

Donde se indica nuestro_codigo_copiado, añades el código de Admob que has creado.

Ahora vamos a añadir la librería que nos permitirá utilizar los anuncios de Google:

google_mobile_ads

Para ello:

flutter pub add google_mobile_ads

Además, tendremos que añadir lo siguiente dentro de pubspec.yaml para aumentar el minimo SDK a 2.12.0 y permitir null safety

environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.17.0 <3.0.0"

Nota: en mi caso a esta fecha ya genera los proyectos con esta versión:

Ahora abrimos nuestro AndroidManifest dentro del directorio: android/app/src/main/AndroidManifest.xml

Y añadimos el código de aplicación:

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

En caso de iOS deberás añadir dentro de info.plist

	<key>GADApplicationIdentifier</key>
	<string>ca-app-pub-3940256099942544~3347511713</string>

Nota:
id de prueba de APP: ca-app-pub-3940256099942544~3347511713

Debes añadir el tuyo, generado desde Admob.

Ahora vamos a nuestra screen principal y vamos a inicializar los anuncios con esta función:

 Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }

Y ahora vamos a crear el banner.

banner.dart

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:idsAnuncios.dart';

class BannerWidget extends StatefulWidget {
  @override
  _BannerWidgetState createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  @override
  void initState() {
    super.initState();

    // TODO: Load a banner ad
    _bannerAd = BannerAd(
      adUnitId: AdHelper.bannerAdUnitId,
      request: AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        onAdFailedToLoad: (ad, err) {
          print('Failed to load a banner ad: ${err.message}');
          ad.dispose();
        },
      ),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _bannerAd?.size.width.toDouble(),
      height: _bannerAd?.size.height.toDouble(),
      child: AdWidget(ad: _bannerAd!),
    );
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }
}

class AdHelper {
  static String bannerAdUnitId = getIdBanner();
}

Recuerda añadir tu ruta a idAnuncios para invocar la función getidBanner(): import ‘package:idsAnuncios.dart’;

Y ahora para utilizarlo añadiremos dentro del componente lo siguiente:

BannerWidget();

Y este es el resultado: