Google Mobile Ads: Monetizando Apps em Flutter

Anteriormente aqui no blog eu já havia publicado um post descrevendo o processo para monetizar um app em Flutter. Nesse post, eu utilizei o pacote admob_flutter para exemplificar a implementação e exibição de anúncios da Admob em um app. Na época do post, fazer uso do admob_flutter era a opção mais viável, uma vez que o google_mobile_ads, que é pacote oficial da Google para exibir anúncios da Admob, ainda não dava suporte ao uso dos banners como widgets.

O tempo passou, o Flutter evoluiu e junto com ele muitos pacotes foram atualizados, ganharam novas funcionalidades e erros foram corrigidos. Dentro desse contexto, o google_mobile_ads ganhou a capacidade de posicionamento livre dos banners como widgets, além da capacidade de exibir diversos tipos de anúncios disponibilizados pela Admob de forma mais simples e com suporte a mediação.

Diante de tantas mudanças nada mais justo do que fazer um novo post a respeito do assunto, não é mesmo? =)

Sendo assim, neste post irei apresentar um exemplo de implementação de anúncios em um app em Flutter por meio do uso do pacote google_mobile_ads. O exemplo será com foco no Android, podendo ser adaptado para o iOS sem muito esforço.

Primeiramente, vamos importar o pacote google_mobile_ads para o nosso projeto.

Além do pacote, também precisamos inserir o ID do Admob da nossa aplicação no AndroidManifest.

Com o pacote importado e o ID inserido, vamos inicializar o pacote no método main do nosso código:

O próximo passo é implementarmos os anúncios do tipo banner e o intersticial. Neste post, vamos apenas focar nesses dois tipos, mas outros formatos como o Rewarded também são suportados.

Para implementar o banner, basta instanciar a classe BannerAd. Dentre os parâmetros de um objeto dessa classe estão o size, o adUnitId, o listener e o request. No parâmetro size é definido o tamanho que o banner irá ocupar na tela. Por sua vez, o adUnitId recebe o identificador do nosso bloco de anúncios. Já no request, os parâmetros da requisição do anúncio são definidos por meio da classe AdRequest. Por fim, o parâmetro listener serve para implementar os callbacks do ciclo de vida do anúncio. Sabendo disso, a implementação do banner ficou da seguinte forma:

Enquanto o banner é um tipo de anuncio em que as dimensões precisam ser definidas e há a necessidade de posicioná-lo no layout, o intersticial é exibido em tela cheia e não exige uma posição fixa. Dessa forma, como é possível ver no código abaixo, é preciso implementa-lo e deixa-lo de “stand-by” até que uma ação ocorra e ele seja exibido de acordo com a rotina definida pelo desenvolvedor.

Com o banner e o intersticial implementados, vamos posicionar nosso banner na parte inferior da tela e criar um botão para que o intersticial possa ser chamado e, em seguida, exibido. O trecho de código abaixo mostra como esse layout foi elaborado.

Com o código pronto, chegou a hora de testar o nosso aplicativo!!

Na imagem abaixo é possível ver como o aplicativo funciona. Lembrando que a forma como o banner e o intersticial são posicionados e exibidos em um app vai depender da regra de negócio. O posicionamento usado aqui é apenas um exemplo.

Bom, é isso! =)

Para visualizar o código-fonte do aplicativo desenvolvido neste post, acesse: Exemplo Google Ads.

Ficou com alguma dúvida? Então, deixa um comentário.

Deixe um comentário