Aggiungere annunci AdMob a un'app Flutter

1. Introduzione

Cosa creerai

Questo codelab ti guida nell'aggiunta di un annuncio banner, un annuncio interstitial e un annuncio con premio a un'app chiamata Awesome Drawing Quiz, un gioco che consente ai giocatori di indovinare il nome del disegno.

Se riscontri problemi (bug del codice, errori grammaticali, formulazione poco chiara) mentre lavori a questo codelab, segnalali facendo clic sul link Segnala un errore nell'angolo in basso a sinistra del codelab.

Cosa imparerai a fare

  • Come configurare il plug-in Google Mobile Ads AdMob
  • Come implementare annunci banner, interstitial e con premio in un'app Flutter

Che cosa ti serve

  • Android Studio 4.1 o versioni successive
  • Xcode 12 o versioni successive (per lo sviluppo di iOS)

Come valuteresti il tuo livello di esperienza con AdMob?

Principiante Intermedio Avanzato

Come valuteresti il tuo livello di esperienza con Flutter?

Principiante Intermedio Avanzato

2. Configura l'ambiente di sviluppo Flutter

Per completare questo lab, hai bisogno di due software: l'SDK Flutter e un editor.

Puoi eseguire il codelab utilizzando uno qualsiasi di questi dispositivi:

  • Un dispositivo fisico Android o iOS connesso al computer e impostato sulla modalità sviluppatore.
  • Il simulatore iOS (richiede l'installazione degli strumenti Xcode).
  • L'emulatore Android (richiede la configurazione in Android Studio).
  • Un browser (Chrome è necessario per il debug).
  • Come applicazione desktop Windows, Linux o macOS. Devi sviluppare sulla piattaforma in cui prevedi di eseguire il deployment. Pertanto, se vuoi sviluppare un'app desktop Windows, devi svilupparla su Windows per accedere alla catena di build appropriata. Esistono requisiti specifici del sistema operativo trattati in dettaglio su docs.flutter.dev/desktop.

Scarica il codice

Dopo aver scaricato il file ZIP, estraine i contenuti. Avrai una cartella denominata admob-ads-in-flutter-master.

In alternativa, puoi clonare il repository GitHub dalla riga di comando:

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

Il repository contiene due cartelle:

  • android_studio_folder.pngstarter: codice iniziale che creerai in questo codelab.
  • android_studio_folder.pngcomplete: codice completato per questo codelab.

3. Configurare l'app AdMob e le unità pubblicitarie

Poiché Flutter è un SDK multipiattaforma, devi aggiungere un'app e unità pubblicitarie sia per Android che per iOS in AdMob.

Configurazione per Android

Per la configurazione per Android, devi aggiungere un'app per Android e creare unità pubblicitarie.

Aggiungere un'app per Android

  1. Nella console AdMob, fai clic su AGGIUNGI APP dal menu App.
  2. Quando ti viene chiesto Hai pubblicato la tua app su Google Play o sull'App Store?, fai clic su NO.
  3. Inserisci Awesome Drawing Quiz nel campo del nome dell'app e seleziona Android come piattaforma.

ddafee37a6f92229.png

  1. L'attivazione delle metriche utente non è necessaria per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere il comportamento degli utenti in modo più dettagliato. Fai clic su AGGIUNGI per completare la procedura.

b918bf44362813a9.png

Creare unità pubblicitarie

Per iniziare ad aggiungere unità pubblicitarie ad AdMob:

  1. Seleziona Awesome Drawing Quiz dal menu App nella console AdMob.
  2. Fai clic sul menu Unità pubblicitarie.

Banner

  1. Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA.
  2. Seleziona Banner come formato.
  3. Inserisci android-adq-banner nel campo Nome unità pubblicitaria.
  4. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Interstitial

  1. Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA.
  2. Seleziona Interstitial come formato.
  3. Inserisci android-adq-interstitial nel campo Nome unità pubblicitaria.
  4. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Con premio

  1. Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA.
  2. Seleziona Con premio come formato.
  3. Inserisci android-adq-rewarded nel campo Nome unità pubblicitaria.
  4. Lascia invariato il valore predefinito per Impostazioni premi.
  5. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

In genere, sono necessarie alcune ore prima che una nuova unità pubblicitaria possa pubblicare annunci.

Se vuoi testare immediatamente il comportamento dell'annuncio, utilizza l'ID app e gli ID unità pubblicitaria di prova elencati nelle tabelle ID app/ID unità pubblicitaria Android e ID app/ID unità pubblicitaria iOS.

Configurazione per iOS

Per la configurazione per iOS, devi aggiungere un'app per iOS e creare unità pubblicitarie.

Aggiungere un'app per iOS

  1. Nella console AdMob, fai clic su AGGIUNGI APP dal menu App.
  2. Quando ti viene chiesto Hai pubblicato la tua app su Google Play o sull'App Store?, fai clic su NO.
  3. Inserisci Awesome Drawing Quiz nel campo del nome dell'app e seleziona iOS come piattaforma.

93e7f9f114232402.png

  1. L'attivazione delle metriche utente non è necessaria per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere il comportamento degli utenti in modo più dettagliato. Fai clic su AGGIUNGI per completare la procedura.

b918bf44362813a9.png

Creare unità pubblicitarie

Per aggiungere unità pubblicitarie:

  1. Seleziona l'app Awesome Drawing Quiz dal menu App nella console AdMob.
  2. Fai clic sul menu Unità pubblicitarie.

Banner

  1. Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA.
  2. Seleziona Banner come formato.
  3. Inserisci ios-adq-banner nel campo Nome unità pubblicitaria.
  4. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Interstitial

  1. Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA.
  2. Seleziona Interstitial come formato.
  3. Inserisci ios-adq-interstitial nel campo Nome unità pubblicitaria.
  4. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Con premio

  1. Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA.
  2. Seleziona Con premio come formato.
  3. Inserisci ios-adq-rewarded nel campo Nome unità pubblicitaria.
  4. Lascia invariato il valore predefinito per Impostazioni premi.
  5. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

In genere, sono necessarie alcune ore prima che una nuova unità pubblicitaria possa pubblicare annunci.

Se vuoi testare immediatamente il comportamento dell'annuncio, utilizza l'ID app di test e gli ID unità pubblicitaria elencati nella tabella seguente.

(Facoltativo) Utilizza l'app e le unità pubblicitarie di test di AdMob

Se vuoi seguire il codelab anziché creare autonomamente una nuova applicazione e nuove unità pubblicitarie, puoi utilizzare l'ID app AdMob di test e gli ID unità pubblicitaria elencati nelle tabelle seguenti.

ID app/unità pubblicitaria Android

Elemento

ID app/ID unità pubblicitaria

ID app monetizzata con AdMob

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Interstitial

ca-app-pub-3940256099942544/1033173712

Con premio

ca-app-pub-3940256099942544/5224354917

ID app/unità pubblicitaria per iOS

Elemento

ID app/ID unità pubblicitaria

ID app monetizzata con AdMob

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Interstitial

ca-app-pub-3940256099942544/4411468910

Con premio

ca-app-pub-3940256099942544/1712485313

Per saperne di più sugli annunci di prova, consulta la documentazione per gli sviluppatori relativa agli annunci di prova per Android e agli annunci di prova per iOS.

4. Aggiungere il plug-in Flutter Google Mobile Ads

Flutter utilizza i plug-in per fornire l'accesso a un'ampia gamma di servizi specifici della piattaforma. I plug-in consentono di accedere a servizi e API su ogni piattaforma.

Il plug-in google_mobile_ads supporta il caricamento e la visualizzazione di annunci banner, interstitial, con premio e nativi utilizzando l'API AdMob.

Poiché Flutter è un SDK multipiattaforma, il plug-in google_mobile_ads è applicabile sia a iOS sia ad Android. Pertanto, se aggiungi il plug-in alla tua app Flutter, viene utilizzato sia dalle versioni Android che iOS dell'app di annunci in linea AdMob.

Aggiungere il plug-in Google Mobile Ads come dipendenza

Per accedere alle API AdMob dal progetto Annunci in linea AdMob, aggiungi google_mobile_ads come dipendenza al file pubspec.yaml che si trova nella radice del progetto.

pubspec.yaml

...
environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^3.0.1

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

Fai clic su Pub get per installare il plug-in nel progetto Awesome Drawing Quiz.

9ce73858eedbd8fc.png

Aggiornare AndroidManifest.xml (Android)

  1. Apri il file android/app/src/main/AndroidManifest.xml in Android Studio.
  2. Aggiungi l'ID app AdMob aggiungendo un tag <meta-data> con il nome com.google.android.gms.ads.APPLICATION_ID. Ad esempio, se l'ID app AdMob è ca-app-pub-3940256099942544~3347511713, devi aggiungere le seguenti righe al file AndroidManifest.xml.

AndroidManifest.xml

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

</manifest>

Aggiornare Info.plist (iOS)

  1. Apri il file ios/Runner/Info.plist in Android Studio.
  2. Aggiungi una chiave GADApplicationIdentifier con il valore stringa dell'ID app AdMob. Ad esempio, se l'ID app AdMob è ca-app-pub-3940256099942544~1458002511, devi aggiungere le seguenti righe al file Info.plist.

ios/Runner/Info.plist

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

5. Aggiungere una classe helper per gli annunci

Crea un nuovo file denominato ad_helper.dart nella directory lib. Quindi, implementa la classe AdHelper, che fornisce un ID app AdMob e ID unità pubblicitarie per Android e iOS.

Assicurati di sostituire l'ID app AdMob (ca-app-pub-xxxxxx~yyyyy) e l'ID unità pubblicitaria (ca-app-pub-xxxxxxx/yyyyyyyy) con gli ID che hai creato nel passaggio precedente.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  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 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 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 UnsupportedError('Unsupported platform');
    }
  }
}

Utilizza il seguente snippet di codice se vuoi utilizzare l'ID app AdMob di test e gli ID unità pubblicitaria di test.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

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

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

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

6. Inizializza l'SDK Google Mobile Ads

Prima di caricare gli annunci, devi inizializzare l'SDK Google Mobile Ads. Apri il file lib/home_route.dart e modifica _initGoogleMobileAds() per inizializzare l'SDK prima del caricamento della home page.

Tieni presente che devi modificare il tipo restituito del metodo _initGoogleMobileAds() da Future<dynamic> a Future<InitializationStatus> per ottenere il risultato dell'inizializzazione dell'SDK al termine.

home_route.dart

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

import 'package:flutter/material.dart';

...

class HomeRoute extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. Aggiungere un annuncio banner

In questa sezione, visualizzi un annuncio banner nella parte superiore della schermata di gioco, come mostrato nello screenshot seguente.

276b4cfa283ea6c7.png

  1. Apri il file lib/game_route.dart e importa ad_manager.dart.
  2. Importa ad_helper.dart e google_mobile_ads.dart aggiungendo le seguenti righe:

lib/game_route.dart

...

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

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

class GameRoute extends StatefulWidget {
  ...
}
  1. Nella classe _GameRouteState, aggiungi i seguenti membri per un banner pubblicitario.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. Nel metodo initState(), crea e carica un BannerAd per il banner 320x50 (AdSize.banner). Tieni presente che un listener di eventi annuncio è configurato per aggiornare la UI (setState()) quando viene caricato un annuncio .

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    request: AdRequest(),
    size: AdSize.banner,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        print('Failed to load a banner ad: ${err.message}');
        ad.dispose();
      },
    ),
  ).load();
}
  1. Modifica il metodo build() per visualizzare un annuncio banner quando è disponibile.

lib/game_route.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: SafeArea(
      child: Stack(
        children: [
          Center(
            ...
          ),
          // TODO: Display a banner when ready
          if (_bannerAd != null)
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}
  1. Rilascia la risorsa associata all'oggetto BannerAd chiamando il metodo BannerAd.dispose() nel metodo di callback dispose().

lib/game_route.dart

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

  ...

  super.dispose();
}

È tutto. Esegui il progetto e inizia una nuova partita. Dopo il caricamento di un annuncio, vedrai un annuncio banner nella parte superiore dello schermo.

276b4cfa283ea6c7.png

8. Aggiungere un annuncio interstitial

In questa sezione, mostri un annuncio interstitial al termine della partita (5 livelli in totale).

  1. Apri il file lib/game_route.dart
  2. Nella classe _GameRouteState, aggiungi i seguenti membri e metodi per un annuncio interstitial.

Tieni presente che un listener di eventi dell'annuncio è configurato per verificare se l'annuncio è pronto (onAdLoaded() e onAdFailedToLoad()) e per visualizzare la schermata Home dell'app quando l'annuncio viene chiuso (onAdDismissedFullScreenContent()).

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
 InterstitialAd? _interstitialAd;

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              _moveToHome();
            },
          );

          setState(() {
            _interstitialAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load an interstitial ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. In questo codelab, un annuncio interstitial viene visualizzato dopo che un utente ha completato 5 livelli. Per ridurre al minimo le richieste di annunci non necessarie, richiedi un annuncio quando un utente raggiunge il livello 3.

Nel metodo onNewLevel(), aggiungi le seguenti righe.

lib/game_route.dart

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

  // TODO: Load an Interstitial Ad
  if (level >= 3 && _interstitialAd == null) {
    _loadInterstitialAd();
  }
}
  1. Al termine di una partita, viene visualizzata la finestra di dialogo del punteggio. Quando un utente chiude la finestra di dialogo, viene indirizzato alla schermata Home del quiz di disegno fantastico.

Poiché gli annunci interstitial devono essere visualizzati tra le transizioni dello schermo, mostriamo l'annuncio interstitial quando un utente fa clic sul pulsante CHIUDI.

Modifica il metodo onGameOver() come segue.

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: [
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_interstitialAd != null) {
                _interstitialAd?.show();
              } else {
                _moveToHome();
              }
            },
          ),
        ],
      );
    },
  );
}
  1. Rilascia la risorsa associata all'oggetto InterstitialAd chiamando il metodo InterstitialAd.dispose() nel metodo di callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

È tutto. Esegui il progetto e completa il gioco. Se viene caricato un annuncio interstitial, lo vedrai dopo aver fatto clic sul pulsante CHIUDI nella finestra di dialogo del punteggio.

c546e438c405e941.gif

9. Aggiungere un annuncio con premio

In questa sezione, aggiungi un annuncio con premio che offre all'utente un suggerimento aggiuntivo come premio.

  1. Apri il file lib/game_route.dart
  2. Nella classe _GameRouteState, aggiungi i membri per un annuncio con premio e implementa il metodo _loadRewardedAd(). Tieni presente che carica un altro annuncio con premio quando l'annuncio viene chiuso (onAdDismissedFullScreenContent) per memorizzarlo nella cache il prima possibile.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _rewardedAd
  RewardedAd? _rewardedAd;

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedAd.load(
      adUnitId: AdHelper.rewardedAdUnitId,
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              setState(() {
                ad.dispose();
                _rewardedAd = null;
              });
              _loadRewardedAd();
            },
          );

          setState(() {
            _rewardedAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load a rewarded ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. Chiama _loadRewardedAd() dal metodo initState() per richiedere un annuncio con premio all'avvio del gioco.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. Consenti agli utenti di guardare un annuncio con premio facendo clic sul pulsante Azione fluttuante. Il pulsante viene visualizzato solo se un utente non ha utilizzato un suggerimento al livello attuale ed è stato caricato un annuncio con premio.

Modifica il metodo _buildFloatingActionButton(), come segue, per visualizzare il pulsante di azione mobile. Tieni presente che se torni a null, il pulsante viene nascosto dalla schermata.

Tieni presente che onUserEarnedReward è l'evento pubblicitario più importante in un annuncio con premio. Si attiva quando un utente diventa idoneo a ricevere un premio (ad esempio, ha terminato la visione di un video).

In questo codelab, il metodo QuizManager.instance.useHint() viene chiamato dal callback, che rivela un altro carattere nella stringa di suggerimento. L'app ricarica un annuncio con premio nel callback onAdClosed per assicurarsi che sia pronto il prima possibile.

lib/game_route.dart

Widget? _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a rewarded ad is available
  return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
      ? 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: [
                    TextButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    TextButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        _rewardedAd?.show(
                          onUserEarnedReward: (_, reward) {
                            QuizManager.instance.useHint();
                          },
                        );
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}
  1. Rilascia la risorsa associata all'oggetto RewardedAd chiamando il metodo RewardedAd.dispose() nel metodo di callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose a RewardedAd object
  _rewardedAd?.dispose();

  ...

  super.dispose();
}

È tutto. Esegui il progetto e gioca. Una volta caricato un annuncio con premio, nella parte inferiore dello schermo viene visualizzato un pulsante con un suggerimento. Fai clic sul pulsante Suggerimento per ricevere un altro suggerimento.

4a114d243ae3e71d.gif

10. Operazione completata.

Hai completato il codelab. Puoi trovare il codice completato per questo codelab nella cartella android_studio_folder.pngcomplete.

Per scoprire come implementare un banner e annunci nativi in linea, consulta il codelab Aggiunta di un banner AdMob e di annunci nativi in linea a un'app Flutter.

Per saperne di più, prova gli altri codelab di Flutter.