Banner

Os anúncios de banner ocupam um lugar no layout do app, na parte de cima ou de baixo na 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.

Este guia mostra como integrar anúncios de banner da AdMob a uma App do Flutter. Além dos snippets de código e das 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 de bloco de anúncios de teste dedicado para banners:

ca-app-pub-3940256099942544/6300978111

ca-app-pub-3940256099942544/2934735716

Os blocos de teste sã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, o teste e a depuração. Basta substituí-los pelos seus próprios IDs de bloco de anúncios antes de publicar seu 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();
  }
}

Tamanhos de banner

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

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

final AdSize adSize = AdSize(300, 50);

Eventos de anúncio de banner

Usando 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 ao 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 mostrar um BannerAd como um widget, é necessário instanciar um AdWidget com um anúncio compatível depois de chamar load(). É possível criar o widget antes chamando load(), mas load() precisa ser chamado antes de ser adicionado ao widget. árvore.

A AdWidget herda da classe de widgets do Flutter e pode ser usada como qualquer outra widget. No iOS, coloque o widget em um widget com um largura e altura. Caso contrário, seu anúncio pode não ser exibido. Um BannerAd podem ser colocados em um contêiner com um tamanho que corresponda 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 quando chamar dispose() é depois que AdWidget for removido do árvore de widgets ou no BannerAdListener.onAdFailedToLoad() o retorno de chamada.

Pronto! Agora o app está pronto para mostrar anúncios em banner.

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

Sabemos que alguns dispositivos mais antigos ou menos potentes executam o Android 9 ou anteriormente podem ter um desempenho abaixo do ideal ao exibir anúncios de banner inline em visualizações com rolagem. Recomendamos usar apenas esses tipos de banners no Android 10 ou mais recente. Banners de posição fixa, como pois os banners ancorados não são afetados e podem ser usados com desempenho ideal em em todos os níveis da API do Android.

Exemplo completo no GitHub

Banner