Aggiungere annunci AdMob a un'app Flutter

1. Introduzione

Cosa creerai

Questo codelab ti spiega come aggiungere un 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 di codice, errori grammaticali, parole poco chiare) mentre lavori con il codelab, segnalali facendo clic sul link Segnala un errore nell'angolo in basso a sinistra del codelab.

Suggerimento: per scoprire come implementare banner e annunci in linea nativi, consulta il codelab Aggiungere un banner AdMob e annunci in linea nativi a un'app Flutter.

Cosa imparerai a fare

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

Che cosa ti serve

• Android Studio 4.1 o versioni successive
• Xcode 12 o versione successiva (per sviluppo iOS)

Come giudichi il tuo livello di esperienza con AdMob?

Principiante Livello intermedio Eccellente

Come valuteresti il tuo livello di esperienza con Flutter?

Principiante Livello intermedio Eccellente

2. Configura l'ambiente di sviluppo di Flutter

Per completare questo lab sono necessari due software: l'SDK Flutter e l'editor.

Puoi eseguire il codelab utilizzando uno 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 (per il debug è richiesto Chrome).
• Come applicazione desktop Windows, Linux o macOS. Devi svilupparle sulla piattaforma in cui prevedi di eseguire il deployment. Quindi, se vuoi sviluppare un'app desktop per Windows, devi sviluppare su Windows per accedere alla catena di build appropriata. Alcuni requisiti specifici del sistema operativo sono descritti in dettaglio all'indirizzo docs.flutter.dev/desktop.

Scarica il codice

Scarica il codice sorgente Visualizza il repository su GitHub

Dopo aver scaricato il file ZIP, estrai 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:

• comando iniziale: codice iniziale che creerai in questo codelab.
• complete: codice completato per questo codelab.

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

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

Nota: se vuoi seguire il codelab anziché creare personalmente una nuova applicazione e unità pubblicitarie, vai alla sezione Utilizzare l'app e le unità pubblicitarie AdMob di prova.

Configurazione per Android

Per eseguire 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 nell'App Store?, fai clic su NO.
3. Inserisci Awesome Drawing Quiz nel campo del nome dell'app e seleziona Android come piattaforma.

4. Non è necessario attivare le metriche utente per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere più dettagliatamente il comportamento degli utenti. Fai clic su AGGIUNGI per completare la procedura.

Creare unità pubblicitarie

Per iniziare ad aggiungere unità pubblicitarie ad AdMob:

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

Banner

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

Interstitial

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

Con premio

Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA. Seleziona Con premio come formato. Inserisci android-adq-rewarded nel campo Nome unità pubblicitaria. Lascia l'impostazione predefinita per Impostazioni premio. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Importante: quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione pubblicati. In caso contrario, l'account verrà sospeso. Per saperne di più sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta la sezione Annunci di prova.

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

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

Configurazione per iOS

Per effettuare l'impostazione 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 nell'App Store?, fai clic su NO.
3. Inserisci Awesome Drawing Quiz nel campo del nome dell'app e seleziona iOS come piattaforma.

4. Non è necessario attivare le metriche utente per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere più dettagliatamente il comportamento degli utenti. Fai clic su AGGIUNGI per completare la procedura.

Creare unità pubblicitarie

Per aggiungere unità pubblicitarie:

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

Banner

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

Interstitial

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

Con premio

Fai clic sul pulsante AGGIUNGI UNITÀ PUBBLICITARIA. Seleziona Con premio come formato. Inserisci ios-adq-rewarded nel campo Nome unità pubblicitaria. Lascia l'impostazione predefinita per Impostazioni premio. Fai clic su CREA UNITÀ PUBBLICITARIA per completare la procedura.

Importante: quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione pubblicati. In caso contrario, l'account verrà sospeso. Per saperne di più sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta la sezione Annunci di prova.

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

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

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

Se preferisci seguire il codelab invece di creare una nuova applicazione e unità pubblicitarie autonomamente, puoi utilizzare l'ID app AdMob di prova e gli ID unità pubblicitaria elencati nelle tabelle seguenti.

ID app/ID unità pubblicitaria per Android

Elemento	ID app/ID unità pubblicitaria
ID app 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 per iOS/ID unità pubblicitaria

Elemento	ID app/ID unità pubblicitaria
ID app 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 ulteriori informazioni sugli annunci di prova, consulta la documentazione per gli sviluppatori sugli annunci di prova per Android e sugli annunci di prova per iOS.

4. Aggiungi il plug-in Flutter di Google Mobile Ads

Flutter utilizza plug-in per fornire l'accesso a una vasta gamma di servizi specifici della piattaforma. I plug-in ti 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 tramite l'API AdMob.

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

Aggiungere il plug-in Google Mobile Ads come dipendenza

Per accedere alle API AdMob dal progetto degli annunci in linea AdMob, aggiungi google_mobile_ads come dipendenza al file pubspec.yaml che si trova alla directory principale 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.

Aggiorna 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 il tuo 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>

Aggiorna Info.plist (iOS)

1. Apri il file ios/Runner/Info.plist in Android Studio.
2. Aggiungi una chiave GADApplicationIdentifier con il valore stringa del tuo ID app AdMob. Ad esempio, se il tuo 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. Aggiungi un corso per gli annunci

Crea un nuovo file denominato ad_helper.dart nella directory lib. Poi, implementa la classe AdHelper, che fornisce un ID app AdMob e ID unità pubblicitaria 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 creati 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 usare l'ID app AdMob di prova e gli ID unità pubblicitaria di prova.

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. Inizializzare 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 una volta completata l'operazione.

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. Aggiungi un annuncio banner

In questa sezione, un annuncio banner viene visualizzato nella parte superiore della schermata del gioco, come illustrato nello screenshot seguente.

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 righe seguenti:

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 {
  ...
}

3. Nel corso _GameRouteState, aggiungi i seguenti membri per un annuncio banner.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}

4. Nel metodo initState(), crea e carica un BannerAd per il banner 320 x 50 (AdSize.banner). Tieni presente che un listener di eventi di annunci è configurato per aggiornare l'interfaccia utente (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();
}

5. Modifica il metodo build() per visualizzare un annuncio banner, se 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!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}

6. 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 un nuovo gioco. Dopo che un annuncio è stato caricato, viene visualizzato un annuncio banner nella parte superiore dello schermo.

8. Aggiungi un annuncio interstitial

In questa sezione, mostri un annuncio interstitial al termine del gioco (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 di annunci è 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}');
        },
      ),
    );
  }

  ...
}

3. In questo codelab, viene visualizzato un annuncio interstitial dopo che un utente completa 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();
  }
}

4. Al termine di una partita, viene visualizzata la finestra di dialogo del risultato. Quando l'utente chiude la finestra di dialogo, l'utente viene indirizzato alla schermata Home del Quiz di Awesome Drawing.

Poiché gli annunci interstitial devono essere visualizzati tra le transizioni tra le schermate, gli mostriamo 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();
              }
            },
          ),
        ],
      );
    },
  );
}

5. 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 un annuncio interstitial viene caricato, lo vedrai visualizzato dopo aver fatto clic sul pulsante CHIUDI nella finestra di dialogo del punteggio.

9. Aggiungi un annuncio con premio

In questa sezione, aggiungi un annuncio con premio che offre a un utente un ulteriore suggerimento come premio.

1. Apri il file lib/game_route.dart
2. Nel corso _GameRouteState, aggiungi membri per un annuncio con premio e implementa il metodo _loadRewardedAd(). Tieni presente che quando l'annuncio viene chiuso (onAdDismissedFullScreenContent) viene caricato un altro annuncio con premio 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}');
        },
      ),
    );
  }

  ...
}

3. Chiama _loadRewardedAd() dal metodo initState() per richiedere un annuncio con premio quando inizia il gioco.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}

4. Consenti agli utenti di guardare un annuncio con premio facendo clic sul pulsante di azione fluttuante. Il pulsante viene visualizzato solo se un utente non ha utilizzato un suggerimento al livello corrente e se viene caricato un annuncio con premio.

Modifica il metodo _buildFloatingActionButton() come segue per visualizzare il pulsante di azione mobile. Tieni presente che la restituzione di null nasconde il pulsante sullo schermo.

Tieni presente che onUserEarnedReward è l'evento più importante in un annuncio con premio. Viene attivato quando un utente diventa idoneo a ricevere un premio (ad esempio dopo aver finito di guardare un video).

In questo codelab, il metodo QuizManager.instance.useHint() viene chiamato dal callback, che rivela un altro carattere nella stringa hint. 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;
}

5. 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 inizia a giocare. Una volta caricato un annuncio con premio, viene visualizzato un pulsante di suggerimento nella parte inferiore dello schermo. Fai clic sul pulsante Suggerimento per ottenere un ulteriore suggerimento.

10. Operazione completata.

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

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

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