Como adicionar anúncios da AdMob a um app Flutter

O que você criará

Esse codelab ajudará você a adicionar um banner da AdMob, um anúncio intersticial e um anúncio premiado a um app chamado Awesome Drawing Quiz, um jogo em que os jogadores adivinham o nome do desenho.

Se você encontrar algum problema (bugs no código, erros gramaticais, instruções pouco claras) neste codelab, informe o problema no link Informar um erro no canto inferior esquerdo do codelab.

O que você aprenderá

  • Como configurar um projeto do Firebase para um app Flutter.
  • Como configurar o plug-in do Firebase da AdMob.
  • Como usar banners, anúncios intersticiais e anúncios premiados no app Flutter.

Pré-requisitos

  • Android Studio 3.6 ou versões mais recentes.
  • Xcode (para compatibilidade com iOS).

Como você classificaria seu nível de experiência com a AdMob?

Iniciante Intermediário Proficiente

O que você quer aprender neste codelab?

Sou novo no assunto e quero uma ter uma boa visão geral. Conheço um pouco sobre esse assunto, mas quero recapitular alguns conceitos. Estou procurando um exemplo de código para usar no meu projeto. Estou procurando uma explicação de algo específico.

Configurar o ambiente para desenvolvedores do Flutter

  1. Instale o SDK do Flutter na máquina seguindo as instruções de instalação em flutter.dev (link em inglês).
  2. Abra o Android Studio e siga as etapas na página de configuração (link em inglês) para instalar os plug-ins do Flutter e do Dart para o Android Studio.

Fazer o download do código

Para fazer o download de todo o código deste codelab como um arquivo ZIP, clique no botão a seguir:

Download do código-fonte

Extraia os arquivos do arquivo ZIP. Uma pasta raiz com o nome admob-ads-in-flutter-master será descompactada.

Ou então, clone o repositório do GitHub usando a linha de comando.

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

O repositório contém duas pastas:

  • android_studio_folder.pngstarter: o código inicial que você usará para criar este codelab.
  • android_studio_folder.pngcomplete: o código concluído deste codelab.

Importar o projeto inicial

  1. Abra o Android Studio.
  2. Na tela de boas-vindas, selecione Open an existing Android Studio project. a3a1fa1afc967e37.png
  3. Abra a pasta android_studio_folder.pngstarter do código que você salvou na etapa anterior.

a879fa2385ba368f.png

  1. A guia Dart Analysis pode exibir as mensagens de erro a seguir. Esse erro ocorre apenas uma vez quando você importar o projeto para o Android Studio porque os pacotes usados no projeto de exemplo ainda não foram transferidos por download.

2b8fbccf84e1e8a5.png

  1. Para corrigir o erro, clique em Get dependencies na parte superior do painel do editor. Isso fará o download dos pacotes de que o projeto de exemplo depende.

dc017166e44ac333.png

  1. Após a conclusão do download, não haverá erros na guia Dart Analysis. Agora, seu projeto está pronto para o desenvolvimento.

Você precisará configurar um projeto do Firebase para veicular anúncios da AdMob usando o plug-in da AdMob para Firebase.

Criar um projeto do Firebase

  1. No Console do Firebase, clique em Adicionar projeto.
  2. Digite Awesome Drawing Quiz como o nome do projeto.
  3. Ative o Google Analytics para o projeto e clique em Continuar.

87590d75b00db648.png

  1. Escolha o local e as configurações do Analytics que se aplicam ao projeto. Leia e aceite os Termos e, em seguida, clique em Criar projeto.

700c64d82fedbd0b.png

  1. Depois de aproximadamente um minuto, o projeto do Firebase estará pronto.

Registrar o app usando o Firebase

No Console do Firebase, selecione o projeto do app Awesome Drawing Quiz que você criou na etapa anterior.

Registrar um app Android

  1. No centro da página de visão geral do projeto, clique no ícone do Android para iniciar o fluxo de trabalho de configuração.
  2. Digite com.codelab.awesomedrawingquiz no campo Nome do pacote do Android.
  3. Digite Awesome Drawing Quiz (Android) no campo Apelido do app.
  4. Clique em Registrar app.
  5. Faça o download do arquivo google-services.json que será usado mais tarde.

Registrar um app iOS

  1. No centro da página de visão geral do projeto, clique no ícone do iOS ou no ícone Adicionar app (+) para iniciar o fluxo de trabalho da configuração.
  2. Digite com.codelab.awesomedrawingquiz no campo Código do pacote do iOS.
  3. Digite Awesome Drawing Quiz (iOS) no campo Apelido do app.
  4. Clique em Registrar app.
  5. Faça o download do arquivo GoogleService-Info.plist que será usado mais tarde.

Adicionar um arquivo de configuração do Firebase

As instruções a seguir mostram como configurar o Firebase para Android e iOS.

Configurar para Android

  1. Consulte a seção Importar o projeto inicial na etapa Configurar o ambiente para desenvolvedores deste codelab para abrir o projeto starter no Android Studio.
  2. Mova o arquivo google-services.json para o diretório android/app do projeto Flutter do Awesome Drawing Quiz.

bd0729c424b0c79d.png

  1. No nível raiz (do projeto) do arquivo Gradle (android/build.gradle), adicione as regras para incluir o plug-in do Serviços do Google para Gradle. Verifique se você tem acesso ao repositório Maven do Google.

android/build.gradle

buildscript {

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
    }

    ...

    dependencies {
      ...

      // TODO: Add Google Services plugin
      classpath 'com.google.gms:google-services:4.3.3'
    }
}

allprojects {
    ...

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
      ...
    }
}
  1. No arquivo do Gradle (android/app/build.gradle) do módulo (no nível do app), aplique o plug-in do Serviços do Google para Gradle.

android/app/build.gradle

...

// TODO: Apply google-services plugin
apply plugin: 'com.google.gms.google-services'

android {
  ...
}

...

Configurar para iOS

  1. Consulte a seção Importar o projeto inicial na etapa Configurar o ambiente para desenvolvedores deste codelab para abrir o projeto starter no Android Studio.
  2. Abra qualquer arquivo no diretório ios. Por example, ios/Runner/AppDelegate.swift.
  3. Clique em Open iOS module in Xcode.

b0e50d31ada7bf46.png

  1. No Xcode, arraste o arquivo GoogleService-Info.plist para o diretório Runner para importar o arquivo de configuração no projeto do Xcode.

1f552ff12b67008.png

Como o Flutter é um SDK multiplataforma, é necessário adicionar um app e blocos de anúncios na AdMob para Android e iOS.

Antes de começar, consulte os glossários da AdMob a seguir.

Bloco de anúncios

O bloco de anúncios é um conjunto de anúncios exibido como resultado do código de anúncio da AdMob. Você pode criar e personalizar um bloco de anúncios na sua conta da AdMob.

Cada bloco de anúncios tem um identificador exclusivo, chamado de ID do bloco de anúncios. Ao implementar um novo bloco de anúncios no seu app, você fará referência ao ID do bloco de anúncios para informar às redes de publicidade para onde enviar os anúncios quando forem solicitados.

Anúncio de banner

Os anúncios de banner ocupam um espaço no layout do app, na parte superior ou inferior da tela do dispositivo. Enquanto os usuários interagem com o app, os anúncios permanecem na tela e podem ser atualizados automaticamente depois de algum tempo.

Anúncio intersticial

Os anúncios intersticiais são anúncios de tela cheia que cobrem a interface do app host. Normalmente, eles são exibidos em pontos de transição naturais no fluxo de um app, como entre atividades ou durante a pausa entre os níveis de um jogo.

Anúncio premiado

Os anúncios premiados são aqueles com que os usuários podem interagir em troca de recompensas no app.

Configurar para Android

Esta seção ensinará você a adicionar um app Android e blocos de anúncios à AdMob.

Adicionar um app Android

Siga as instruções a seguir para adicionar um app Android à AdMob:

  1. No console da AdMob, clique em ADICIONAR APLICATIVO no menu Apps.
  2. Quando a pergunta Você publicou seu app no Google Play ou na App Store? for exibida, clique em NÃO.
  3. Digite Awesome Drawing Quiz no campo Nome do aplicativo e selecione Android como a plataforma.

152e1694fd0ce870.png

  1. Não é obrigatório ativar as métricas do usuário para concluir este codelab. No entanto, isso é recomendado porque ativar as métricas do usuário fornece dados de análise detalhados sobre o comportamento dos usuários. Clique em ADICIONAR para concluir o processo.

5204925f5c652b41.png

  1. Anote o novo ID do app (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Você precisará adicioná-lo ao código-fonte do projeto de exemplo para exibir anúncios.

Criar blocos de anúncios

Para começar a adicionar blocos de anúncios à AdMob:

  1. Selecione o Awesome Drawing Quiz (Android) no menu Apps do console da AdMob.
  2. Clique no menu Blocos de anúncios.

No menu Blocos de anúncios, siga as instruções para criar um banner, um anúncio intersticial e um bloco de anúncios premiados.

Banner

  1. Clique no botão ADICIONAR BLOCO DE ANÚNCIOS.
  2. Selecione Banner como o formato.
  3. Digite android-adq-banner no campo Nome do bloco de anúncios.
  4. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Intersticial

  1. Clique no botão ADICIONAR BLOCO DE ANÚNCIOS.
  2. Selecione Intersticial como o formato.
  3. Digite android-adq-interstitial no campo Nome do bloco de anúncios.
  4. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Premiado

  1. Clique no botão ADICIONAR BLOCO DE ANÚNCIOS.
  2. Selecione Premiado como o formato.
  3. Digite android-adq-rewarded no campo Nome do bloco de anúncios.
  4. Não mude as Configurações do prêmio.
  5. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Configurar para iOS

Esta seção ensinará você a adicionar um app iOS e blocos de anúncios à AdMob.

Adicionar um app iOS

Siga as instruções a seguir para adicionar um app iOS à AdMob:

  1. No console da AdMob, clique em ADICIONAR APLICATIVO no menu Apps.
  2. Quando a pergunta Você publicou seu app no Google Play ou na app store? for exibida, clique em NÃO.
  3. Digite Awesome Drawing Quiz no campo Nome do aplicativo e selecione iOS como a plataforma.

a8fa48af652021d8.png

  1. Não é obrigatório ativar as métricas do usuário para concluir este codelab. No entanto, isso é recomendado porque ativar as métricas do usuário fornece dados de análise detalhados sobre o comportamento dos usuários. Clique em ADICIONAR para concluir o processo.

5204925f5c652b41.png

  1. Anote o novo ID do app (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Você precisará adicioná-lo ao código-fonte do projeto de exemplo para exibir anúncios.

Criar blocos de anúncios

Para começar a adicionar blocos de anúncios:

  1. Selecione Awesome Drawing Quiz (iOS) no menu Apps do console da AdMob.
  2. Clique no menu Blocos de anúncios.

No menu Blocos de anúncios, siga as instruções para criar um banner, um anúncio intersticial e um bloco de anúncios premiados.

Banner

  1. Clique no botão ADICIONAR BLOCO DE ANÚNCIOS.
  2. Selecione Banner como o formato.
  3. Digite ios-adq-banner no campo Nome do bloco de anúncios.
  4. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Intersticial

  1. Clique no botão ADICIONAR BLOCO DE ANÚNCIOS.
  2. Selecione Intersticial como o formato.
  3. Digite ios-adq-interstitial no campo Nome do bloco de anúncios.
  4. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Premiado

  1. Clique no botão ADICIONAR BLOCO DE ANÚNCIOS.
  2. Selecione Premiado como o formato.
  3. Digite ios-adq-rewarded no campo Nome do bloco de anúncios.
  4. Não mude as Configurações do prêmio.
  5. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Usar o app e os blocos de anúncios pré-configurados da AdMob (opcional)

Caso prefira seguir o codelab em vez de criar um novo aplicativo e blocos de anúncios por conta própria, você poderá usar os IDs de app e de bloco de anúncios da AdMob preparados para este codelab.

Android

Testar os IDs da AdMob para Android:

Item

ID do app/ID do bloco de anúncios

ID do app da AdMob

ca-app-pub-3940256099942544~4354546703

Banner

ca-app-pub-3940256099942544/8865242552

Intersticial

ca-app-pub-3940256099942544/7049598008

Premiado

ca-app-pub-3940256099942544/8673189370

No iOS

Testar os IDs da AdMob para iOS:

Item

ID do app/ID do bloco de anúncios

ID do app da AdMob

ca-app-pub-3940256099942544~2594085930

Banner

ca-app-pub-3940256099942544/4339318960

Intersticial

ca-app-pub-3940256099942544/3964253750

Premiado

ca-app-pub-3940256099942544/7552160883

O Flutter usa plug-ins para oferecer acesso a uma grande variedade de serviços específicos da plataforma. Os plug-ins incluem um código específico à plataforma para acessar serviços e APIs em cada uma.

O plug-in firebase_admob (link em inglês) é compatível com o carregamento e a exibição de anúncios premiados, intersticiais e de banner usando a API AdMob.

Como o Flutter é um SDK multiplataforma, o plug-in firebase_admob pode ser usado para iOS e Android. Assim, se você adicionar o plug-in ao seu app Flutter, ele será usado pelas versões Android e iOS do app Awesome Drawing Quiz.

Como adicionar o plug-in do Firebase AdMob como uma dependência

Para acessar as APIs da AdMob no projeto Awesome Drawing Quiz, adicione o plug-in firebase_admob como uma dependência do arquivo pubspec.yaml localizado na raiz do projeto.

pubspec.yaml

...

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # Add the following line
  firebase_admob: ^0.9.3

...

Clique em Packages get para instalar o plug-in no projeto Awesome Drawing Quiz.

d9fc62bf4054cea9.png

Atualizar AndroidManifest.xml (Android)

  1. Abra o arquivo android/app/src/main/AndroidManifest.xml no Android Studio.
  2. Adicione o ID do app da AdMob adicionando uma tag <meta-data> e digitando com.google.android.gms.ads.APPLICATION_ID. Se o ID do aplicativo da AdMob for ca-app-pub-3940256099942544~3347511713, será necessário adicionar as linhas a seguir ao arquivo AndroidManifest.xml.

android/app/src/main/AndroidManifest.xml

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

</manifest>

Atualizar Info.plist (iOS)

  1. Abra o arquivo ios/Runner/Info.plist no Android Studio.
  2. Adicione uma chave GADApplicationIdentifier com o valor da string do ID do app da AdMob. Por exemplo, se o ID do app da AdMob for ca-app-pub-3940256099942544~1458002511, será necessário adicionar as linhas a seguir ao arquivo Info.plist.

ios/Runner/Info.plist

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

Crie um novo arquivo com o nome ad_manager.dart no diretório lib. Em seguida, implemente a classe AdManager, que fornece um ID de app da AdMob e IDs de blocos de anúncios para Android e iOS.

Lembre-se de substituir o ID do app da AdMob (ca-app-pub-xxxxxx~yyyyy) e o ID do bloco de anúncios (ca-app-pub-xxxxxxx/yyyyyyyy) pelos IDs criados na etapa anterior.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_ADMOB_APP_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_ADMOB_APP_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_REWARDED_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_REWARDED_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Use o snippet de código a seguir se você quiser usar o ID do app da AdMob pré-configurado e os IDs de blocos de anúncios deste codelab.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544~4354546703";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544~2594085930";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8865242552";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4339318960";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/7049598008";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/3964253750";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8673189370";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/7552160883";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Antes de carregar anúncios, você precisará inicializar o SDK da AdMob. Abra o arquivo lib/home_route.dart e modifique _initAdMob() para inicializar o SDK antes do início do jogo.

lib/home_route.dart

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

import 'package:awesome_drawing_quiz/app_theme.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

import 'package:flutter/material.dart';

...

class _HomeRouteState extends State<HomeRoute> {

  ...

  Future<void> _initAdMob() {
    // TODO: Initialize AdMob SDK
    return FirebaseAdMob.instance.initialize(appId: AdManager.appId);
  }
}

Nesta seção, você adicionará um anúncio de banner na parte superior da tela do jogo, como mostrado.

580a296a77065928.png 6d6659121dbf382e.png

Abra o arquivo lib/game_route.dart e importe ad_manager.dart e firebase_admob.dart adicionando as linhas a seguir:

lib/game_route.dart

...

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

class GameRoute extends StatefulWidget {
  ...
}

Em seguida, na classe _GameRouteState, adicione o membro a seguir e os métodos para o anúncio de banner.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd _bannerAd;

  ...

  // TODO: Implement _loadBannerAd()
  void _loadBannerAd() {
    _bannerAd
      ..load()
      ..show(anchorType: AnchorType.top);
  }

  ...
}

No método initState(), crie um objeto BannerAd e carregue o anúncio de banner. Observe que um banner de 320x50 (AdSize.banner) será exibido.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _bannerAd
  _bannerAd = BannerAd(
      adUnitId: AdManager.bannerAdUnitId,
      size: AdSize.banner,
  );

  // TODO: Load a Banner Ad
  _loadBannerAd();
}

Por fim, libere o recurso associado ao objeto BannerAd chamando o método BannerAd.dispose() no método de callback dispose().

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

Pronto! Execute o projeto para ver um anúncio de banner exibido na parte superior da tela do jogo.

d82f07411be93d37.png f221e4821191cf99.png

Nesta seção, você exibirá um anúncio intersticial após o jogo terminar (cinco níveis no total).

Primeiro, adicione os membros e métodos a seguir para o anúncio intersticial na classe _GameRouteState.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
  InterstitialAd _interstitialAd;

  // TODO: Add _isInterstitialAdReady
  bool _isInterstitialAdReady;

  ...

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    _interstitialAd.load();
  }

  // TODO: Implement _onInterstitialAdEvent()
  void _onInterstitialAdEvent(MobileAdEvent event) {
    switch (event) {
      case MobileAdEvent.loaded:
        _isInterstitialAdReady = true;
        break;
      case MobileAdEvent.failedToLoad:
        _isInterstitialAdReady = false;
        print('Failed to load an interstitial ad');
        break;
      case MobileAdEvent.closed:
        _moveToHome();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Em seguida, inicialize _isInterstitialAdReady e _interstitialAd no método initState(). Como o _onInterstitialAdEvent está configurado como um listener de eventos de anúncio para o _interstitialAd, todos os eventos de anúncio do _interstitialAd serão enviados ao método _onInterstitialAdEvent.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isInterstitialAdReady
  _isInterstitialAdReady = false;

  // TODO: Initialize _interstitialAd
  _interstitialAd = InterstitialAd(
    adUnitId: AdManager.interstitialAdUnitId,
    listener: _onInterstitialAdEvent,
  );
}

Neste codelab, um anúncio intersticial será exibido depois que o usuário terminar cinco níveis. Para minimizar solicitações de anúncios desnecessárias, começaremos a carregar anúncios quando o usuário chegar ao nível 3.

No método onNewLevel(), adicione as linhas a seguir.

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && !_isInterstitialAdReady) {
    _loadInterstitialAd();
  }
}

Quando um jogo terminar, a caixa de diálogo de pontuação será exibida. Quando um usuário fechar a caixa de diálogo, ele será direcionado para a tela inicial do Awesome Drawing Quiz.

Como os anúncios intersticiais precisam ser exibidos entre as transições de tela, exibiremos esses anúncios quando um usuário clicar no botão CLOSE.

Modifique o método onGameOver() desta maneira:

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: <Widget>[
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_isInterstitialAdReady) {
                _interstitialAd.show();
              }

              _moveToHome();
            },
          ),
        ],
      );
    },
  );
}

Por fim, libere o recurso associado ao objeto InterstitialAd chamando o método InterstitialAd.dispose() no método de callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

Pronto! Execute o projeto para ver um anúncio intersticial exibido após o jogo terminar.

53f44b98e8a0c446.gif

Nesta seção, você adicionará um anúncio premiado que dará uma dica adicional como prêmio ao usuário.

Primeiro, adicione os membros e os métodos do anúncio premiado na classe _GameRouteState. RewardedVideoAd é um objeto Singleton. Portanto, você não precisa de um membro para gerenciar a instância da classe RewardedVideoAd.

RewardedVideoAdEvent.rewarded é o evento de anúncio mais importante em um anúncio premiado. Esse evento é acionado quando um usuário se qualifica para receber um prêmio (por exemplo, quando ele terminar de assistir um vídeo). Neste codelab, o RewardedVideoAdEvent.rewarded chama o método QuizManager.instance.useHint(), que revela mais um caractere na string de dica.

Além disso, dependendo do evento do anúncio, RewardedVideoAdEvent.rewarded atualiza a IU mudando o valor de _isRewardedAdReady. Veja que _isRewardedAdReady atualizará o anúncio quando um usuário fechá-lo para garantir que o anúncio esteja pronto o quanto antes.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _isRewardedAdReady
  bool _isRewardedAdReady;

  ...

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedVideoAd.instance.load(
      targetingInfo: MobileAdTargetingInfo(),
      adUnitId: AdManager.rewardedAdUnitId,
    );
  }

  // TODO: Implement _onRewardedAdEvent()
  void _onRewardedAdEvent(RewardedVideoAdEvent event,
      {String rewardType, int rewardAmount}) {
    switch (event) {
      case RewardedVideoAdEvent.loaded:
        setState(() {
          _isRewardedAdReady = true;
        });
        break;
      case RewardedVideoAdEvent.closed:
        setState(() {
          _isRewardedAdReady = false;
        });
        _loadRewardedAd();
        break;
      case RewardedVideoAdEvent.failedToLoad:
        setState(() {
          _isRewardedAdReady = false;
        });
        print('Failed to load a rewarded ad');
        break;
      case RewardedVideoAdEvent.rewarded:
        QuizManager.instance.useHint();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Em seguida, inicialize _isRewardedAdReady e defina o _onRewardedAdEvent como um listener de eventos de anúncio. Em seguida, chame o método _loadRewardedAd() para solicitar um anúncio premiado.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isRewardedAdReady
  _isRewardedAdReady = false;

  // TODO: Set Rewarded Ad event listener
  RewardedVideoAd.instance.listener = _onRewardedAdEvent;

  // TODO: Load a Rewarded Ad
  _loadRewardedAd();
}

Em seguida, permita que os usuários assistam ao anúncio premiado clicando no botão de ação flutuante. O botão só será exibido se um usuário não tiver usado uma dica no nível atual e um anúncio premiado estiver carregado.

Modifique o método _buildFloatingActionButton() como no exemplo a seguir para exibir o botão de ação flutuante. Retornar null ocultará o botão da tela.

lib/game_route.dart

Widget _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a Rewarded Ad is available
  return (!QuizManager.instance.isHintUsed && _isRewardedAdReady)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    FlatButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        RewardedVideoAd.instance.show();
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}

Por fim, remova o listener de eventos de anúncios premiados no método de callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Remove Rewarded Ad event listener
  RewardedVideoAd.instance.listener = null;

  ...

  super.dispose();
}

Pronto! Execute o projeto e assista a um anúncio premiado para receber mais uma dica.

2a79a3db6b44dae9.gif

9db81af632cb2b15.pngVocê encontrou algo especial!

Você concluiu o codelab. O código completo deste codelab está na pasta android_studio_folder.pngcomplete.

Para saber mais, veja os outros codelabs do Flutter (link em inglês).