Aqui no blog, em um post anterior, eu já demonstrei como utilizar o Admob com o objetivo de monetizar um app. Nesse antigo post, além da criação dos anúncios no console do Admob, foi realizada também a implementação da integração em um aplicativo Android desenvolvido em Java. Porém, se quiséssemos criar uma versão desse mesmo app para o iOS, por exemplo, a maneira de implementar os anúncios seria completamente distinta, o que custaria mais tempo e estudo.
Com a ascensão do Flutter ficou mais fácil a monetização de apps, uma vez que, com uma mesma implementação, é possível monetizar o aplicativo tanto para Android quanto para iOS. Apesar do Flutter ser um framework novo para o desenvolvimento de apps, ele já possui diversos pacotes que auxiliam o desenvolvedor a monetizar seu app. Um deles, o admob_flutter, eu mencionei anteriormente quando falei de alguns pacotes úteis para a criação de apps em Flutter. Com o uso de pacotes como o admob_flutter, é possível garantir que a posição e a exibição dos anúncios serão mantidas tanto na versão Android quanto na iOS do app.
Neste post, vamos utilizar o admob_flutter para exibirmos anúncios em um aplicativo desenvolvido em Flutter. Serão implementados anúncios em banner e full screen. Lembrando que focaremos apenas na implementação. Toda a parte de criação e configuração no Admob já foi detalhada em posts anteriores.
Então, sem mais blá blá blá… Vamos começar a implementação.
Primeiramente, vamos importar o pacote no pubspec.yaml:
Com a importação feita, precisamos atualizar o arquivo AndroiMainfest.xml na pasta android > app > main, adicionando na tag application o seguinte código:
É importante deixar claro que tanto o APPLICATION_ID (exposto acima) quanto os ID dos blocos de anúncios que serão usados no projeto deste post são exemplos disponibilizados pelo próprio Admob. Por isso, é interessante trocar os ID por outros antes de utilizar o código em seu aplicativo (você não quer dar sua monetização de graça à Google não é mesmo? kkk).
Para os anúncios também rodarem no iOS, é preciso inserir o seguinte trecho de código ao final do arquivo Info.plist na pasta ios > Runner:
Feito isso, já podemos começar a implementar a tela principal do app, a qual exibirá três tipos de anúncios. Serão dois do tipo banner, sendo um pequeno de 320×50 e outro médio de 300×250. Além disso, também será exibido um intersticial (full-screen). Na documentação do Admob é possível encontrar todos os tamanhos de anúncios disponíveis.
Continuando a implementação, precisamos inserir o seguinte trecho de código no método main do nosso projeto:
No código acima, no método Admob.initialize, é realizada a inicialização da integração com o Admob. Lembrando que o ID da aplicação deve ser passado como parâmetro de acordo com a plataforma (você deve criar um ID para o Android e outro para o iOS).
Com o ID da aplicação já atribuído, precisamos criar variáveis para receber os ID dos blocos de anúncio para cada plataforma. Os métodos getBannerId e getInterstitialId foram criados apenas para retornar o ID de acordo com a plataforma em que o app estiver sendo executado.
No método initState do nosso StatefulWidget, instanciamos um AdmobInterstitial e criamos um método chamado getBanner para instanciar um AdmobBanner, o qual possui como parâmetro o tamanho do banner que deve ser exibido. Além disso, também implementamos o método showInterstitial para checar se o anúncio intersticial foi carregado e exibi-lo.
É importante ressaltar que com o pacote admob_flutter também é possível manipular os eventos gerados no carregamento dos anúncios. Podendo o evento ser gerado quando o anuncio foi aberto ou falhou no carregamento, por exemplo. Para isso implementamos o método handleEvent com o objetivo de customizar uma ação para cada tipo de evento capturado.
Finalizada a base da integração, a próxima etapa é criar posicionar os anúncios na tela. Com o pacote admob_flutter esse posicionamento é livre. Para este tutorial, um widget foi implementado de modo que a tela fosse dividida em três partes. Dessa forma, o banner de 320×50, o banner de 300×250 e um botão para executar o anúncio intersticial foram dispostos nessa ordem.
No código acima é possível notar que é preciso chamar o dispose do intersticial quando este bloco de anúncio não for mais necessário (antes do app ser fechado, por exemplo).
O resultado final da tela que foi implementada neste post pode ser visto baixo:
Para visualizar o código fonte do projeto desenvolvido neste post acesse: https://github.com/luizmarcus/Flutter/tree/master/exemplo_admob
Bom, é isso.
Qualquer dúvida, deixa um comentário.