Banner

Os anúncios de banner ocupam um lugar no layout de um app, na parte superior ou inferior da tela do dispositivo. Eles permanecem na tela enquanto os usuários interagem com o app e podem ser atualizados automaticamente após um determinado período.

Neste guia, mostramos como integrar os anúncios de banner da AdMob a um app Flutter. Além de snippets de código e instruções, ele também inclui informações sobre o dimensionamento correto dos banners.

Sempre teste com anúncios de teste

Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. Sua conta poderá ser suspensa se isso não for feito.

A maneira mais fácil de carregar anúncios de teste é usar nosso ID do bloco de anúncios de teste dedicado para banners:

Android

ca-app-pub-3940256099942544/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

Os blocos de anúncios de teste estão configurados para retornar anúncios de teste para cada solicitação, e você pode usá-los nos seus próprios apps durante a programação, os testes e a depuração. Não se esqueça de substituí-los pelos seus próprios IDs de blocos de anúncios antes de publicar o app.

Carregar um anúncio

O exemplo a seguir instancia um anúncio 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();
  }
}

A tabela abaixo lista os tamanhos padrão de banner.

Tamanho em dp (L x A) Descrição Constante AdSize
320x50 Banner padrão banner
320 x 100 Banner grande largeBanner
320x250 Retângulo médio mediumRectangle
468 x 60 Banner no tamanho original fullBanner
728 x 90 Ranking leaderboard
Largura fornecida x altura adaptável Banner adaptativo N/A

Para definir um tamanho de banner personalizado, defina o AdSize preferido:

final AdSize adSize = AdSize(300, 50);

Com o uso de BannerAdListener, é possível detectar eventos de ciclo de vida, como quando um anúncio é carregado. Este exemplo implementa cada método e registra uma mensagem no console:

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

Exibir um anúncio de banner

Para exibir um BannerAd como widget, é necessário instanciar um AdWidget com um anúncio compatível depois de chamar load(). É possível criar o widget antes de chamar load(), mas load() precisa ser chamado antes de ser adicionado à árvore de widgets.

O AdWidget é herdado da classe Widget do Flutter e pode ser usado como qualquer outro widget. No iOS, coloque o widget em um widget com largura e altura especificadas. Caso contrário, seu anúncio não será exibido. Um BannerAd pode ser colocado em um contêiner com um tamanho que corresponde ao anúncio:

...
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!),
      ),
    ),
  )
}
...

Um anúncio precisa ser descartado quando o acesso a ele não for mais necessário. A prática recomendada para chamar dispose() é depois que o AdWidget for removido da árvore de widgets ou no callback BannerAdListener.onAdFailedToLoad().

Pronto! Seu app está pronto para exibir anúncios de banner.

Limitação de rolagem no Android 9 e versões anteriores

Sabemos que alguns dispositivos mais antigos ou menos potentes com o Android 9 ou versões anteriores podem apresentar um desempenho inferior ao exibir anúncios de banner inline nas visualizações de rolagem. Recomendamos usar esses tipos de banner apenas no Android 10 ou versões mais recentes. Os banners de posição fixa, como os fixos, não são afetados e podem ser usados com desempenho ideal em todos os níveis da API do Android.

Exemplo completo no GitHub

Banner