AdMob-Anzeigen zu einer Flutter-App hinzufügen

1. Einführung

Umfang

In diesem Codelab erfahren Sie, wie Sie einer App namens Awesome Drawing Quiz eine Banneranzeige, eine Interstitial-Anzeige und eine Videoanzeige mit Prämie hinzufügen. In diesem Spiel müssen die Spieler den Namen der Zeichnung erraten.

Wenn Sie bei der Bearbeitung dieses Codelabs auf Probleme stoßen (z. B. Codefehler, Grammatikfehler oder unklare Formulierungen), melden Sie das Problem bitte, indem Sie links unten im Codelab auf den Link Fehler melden klicken.

Lerninhalte

  • Das Google Mobile Ads AdMob-Plug-in konfigurieren
  • Banner-, Interstitial- und Anzeigen mit Prämie in einer Flutter-App implementieren

Voraussetzungen

  • Android Studio 4.1 oder höher
  • Xcode 12 oder höher (für die iOS-Entwicklung)

Wie würden Sie Ihre Erfahrung mit AdMob bewerten?

Anfänger Mittelstufe Fortgeschrittene

Wie würden Sie Ihre Erfahrung mit Flutter bewerten?

Anfänger Mittelstufe Fortgeschritten

2. Flutter-Entwicklungsumgebung einrichten

Für dieses Lab benötigen Sie zwei Softwarekomponenten: das Flutter SDK und einen Editor.

Sie können das Codelab auf einem der folgenden Geräte ausführen:

  • Ein physisches Android- oder iOS-Gerät, das mit Ihrem Computer verbunden ist und auf den Entwicklermodus eingestellt ist.
  • Der iOS-Simulator (erfordert die Installation von Xcode-Tools).
  • Android Emulator (Einrichtung in Android Studio erforderlich)
  • Ein Browser (für das Debugging ist Chrome erforderlich).
  • Als Windows-, Linux- oder macOS-Desktopanwendung. Sie müssen auf der Plattform entwickeln, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie unter Windows entwickeln, um auf die entsprechende Build-Kette zuzugreifen. Es gibt betriebssystemspezifische Anforderungen, die auf docs.flutter.dev/desktop ausführlich beschrieben werden.

Code herunterladen

Nachdem Sie die ZIP-Datei heruntergeladen haben, extrahieren Sie ihren Inhalt. Sie haben einen Ordner mit dem Namen admob-ads-in-flutter-master.

Alternativ können Sie das GitHub-Repository über die Befehlszeile klonen:

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

Das Repository enthält zwei Ordner:

  • android_studio_folder.pngstarter: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
  • android_studio_folder.pngcomplete: Der vollständige Code für dieses Codelab.

3. AdMob-App und Anzeigenblöcke einrichten

Da Flutter ein plattformübergreifendes SDK ist, müssen Sie in AdMob eine App und Anzeigenblöcke sowohl für Android als auch für iOS hinzufügen.

Für Android einrichten

Für die Einrichtung für Android müssen Sie eine Android-App hinzufügen und Anzeigenblöcke erstellen.

Android-App hinzufügen

  1. Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
  2. Wenn Sie gefragt werden, ob Sie Ihre App bei Google Play oder im App Store veröffentlicht haben, klicken Sie auf NEIN.
  3. Geben Sie Awesome Drawing Quiz in das Feld für den App-Namen ein und wählen Sie Android als Plattform aus.

ddafee37a6f92229.png

  1. Die Aktivierung von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen Ihnen jedoch, dies zu tun, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

b918bf44362813a9.png

Anzeigenblöcke erstellen

So fügen Sie AdMob Anzeigenblöcke hinzu:

  1. Wählen Sie in der AdMob-Konsole im Menü Apps die Option Awesome Drawing Quiz aus.
  2. Klicken Sie auf das Menü Anzeigenblöcke.

Banner

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie Banner als Format aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-adq-banner ein.
  4. Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Interstitial

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie Interstitial als Format aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-adq-interstitial ein.
  4. Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Mit Prämie

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie Mit Prämie als Format aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-adq-rewarded ein.
  4. Behalten Sie die Standardeinstellungen für Einstellungen für Prämien bei.
  5. Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Normalerweise dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie das Verhalten der Anzeige sofort testen möchten, verwenden Sie die Test-App-ID und die Anzeigenblock-IDs, die in den Tabellen „Android-App-ID/Anzeigenblock-ID“ und „iOS-App-ID/Anzeigenblock-ID“ aufgeführt sind.

Für iOS einrichten

Für die Einrichtung für iOS müssen Sie eine iOS-App hinzufügen und Anzeigenblöcke erstellen.

iOS-App hinzufügen

  1. Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
  2. Wenn Sie gefragt werden, ob Sie Ihre App bei Google Play oder im App Store veröffentlicht haben, klicken Sie auf NEIN.
  3. Geben Sie Awesome Drawing Quiz in das Feld für den App-Namen ein und wählen Sie iOS als Plattform aus.

93e7f9f114232402.png

  1. Die Aktivierung von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen Ihnen jedoch, dies zu tun, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

b918bf44362813a9.png

Anzeigenblöcke erstellen

So fügen Sie Anzeigenblöcke hinzu:

  1. Wählen Sie in der AdMob-Konsole im Menü Apps die App Awesome Drawing Quiz aus.
  2. Klicken Sie auf das Menü Anzeigenblöcke.

Banner

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie Banner als Format aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-adq-banner ein.
  4. Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Interstitial

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie Interstitial als Format aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-adq-interstitial ein.
  4. Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Mit Prämie

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie Mit Prämie als Format aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-adq-rewarded ein.
  4. Behalten Sie die Standardeinstellungen für Einstellungen für Prämien bei.
  5. Klicken Sie auf AD UNIT ERSTELLEN, um den Vorgang abzuschließen.

Normalerweise dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie das Verhalten der Anzeige sofort testen möchten, verwenden Sie die in der folgenden Tabelle aufgeführten Test-App-IDs und Anzeigenblock-IDs.

Optional: AdMob-Test-App und ‑Anzeigenblöcke verwenden

Wenn Sie das Codelab durcharbeiten möchten, ohne selbst eine neue Anwendung und Anzeigenblöcke zu erstellen, können Sie die in den folgenden Tabellen aufgeführten Test-IDs für AdMob-Apps und Anzeigenblöcke verwenden.

Android-App-ID/Anzeigenblock-ID

Posten

App-ID/Anzeigenblock-ID

AdMob-App-ID

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Interstitial

ca-app-pub-3940256099942544/1033173712

Verfügbar

ca-app-pub-3940256099942544/5224354917

iOS-App-ID/Anzeigenblock-ID

Posten

App-ID/Anzeigenblock-ID

AdMob-App-ID

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Interstitial

ca-app-pub-3940256099942544/4411468910

Verfügbar

ca-app-pub-3940256099942544/1712485313

Weitere Informationen zu Testanzeigen finden Sie in der Entwicklerdokumentation zu Android-Testanzeigen und iOS-Testanzeigen.

4. Google Mobile Ads Flutter-Plug-in hinzufügen

Flutter verwendet Plug-ins, um Zugriff auf eine Vielzahl von plattformspezifischen Diensten zu ermöglichen. Mit Plugins können Sie auf jeder Plattform auf Dienste und APIs zugreifen.

Das google_mobile_ads-Plug-in unterstützt das Laden und Ausliefern von Banner-, Interstitial-, Anzeigen mit Prämie und nativen Anzeigen über die AdMob API.

Da Flutter ein plattformübergreifendes SDK ist, kann das google_mobile_ads-Plug-in sowohl für iOS als auch für Android verwendet werden. Wenn Sie das Plug-in also Ihrer Flutter-App hinzufügen, wird es sowohl von der Android- als auch von der iOS-Version der AdMob-App für Inline-Anzeigen verwendet.

Google Mobile Ads-Plug-in als Abhängigkeit hinzufügen

Wenn Sie über das Projekt AdMob-Inlineanzeigen auf die AdMob APIs zugreifen möchten, fügen Sie google_mobile_ads als Abhängigkeit in die Datei pubspec.yaml ein, die sich im Stammverzeichnis des Projekts befindet.

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

...

Klicken Sie auf Pub get, um das Plug-in im Projekt Awesome Drawing Quiz zu installieren.

9ce73858eedbd8fc.png

AndroidManifest.xml aktualisieren (Android)

  1. Öffnen Sie die Datei android/app/src/main/AndroidManifest.xml in Android Studio.
  2. Fügen Sie Ihre AdMob-App-ID hinzu, indem Sie ein <meta-data>-Tag mit dem Namen com.google.android.gms.ads.APPLICATION_ID einfügen. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~3347511713 lautet, müssen Sie der Datei AndroidManifest.xml die folgenden Zeilen hinzufügen.

AndroidManifest.xml

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

</manifest>

Info.plist aktualisieren (iOS)

  1. Öffnen Sie die Datei ios/Runner/Info.plist in Android Studio.
  2. Fügen Sie einen GADApplicationIdentifier-Schlüssel mit dem Stringwert Ihrer AdMob-App-ID hinzu. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~1458002511 lautet, müssen Sie der Datei Info.plist die folgenden Zeilen hinzufügen.

ios/Runner/Info.plist

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

5. Helferklasse für Anzeigen hinzufügen

Erstellen Sie eine neue Datei mit dem Namen ad_helper.dart im Verzeichnis lib. Implementieren Sie dann die Klasse AdHelper, die eine AdMob-App-ID und Anzeigenblock-IDs für Android und iOS bereitstellt.

Achten Sie darauf, dass Sie die AdMob-App-ID (ca-app-pub-xxxxxx~yyyyy) und die Anzeigenblock-ID (ca-app-pub-xxxxxxx/yyyyyyyy) durch die IDs ersetzen, die Sie im vorherigen Schritt erstellt haben.

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');
    }
  }
}

Verwenden Sie den folgenden Code-Snippet, wenn Sie die Test-App-ID und die Test-Anzeigenblock-IDs von AdMob verwenden möchten.

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. Google Mobile Ads SDK initialisieren

Bevor Sie Anzeigen laden, müssen Sie das Google Mobile Ads SDK initialisieren. Öffnen Sie die Datei lib/home_route.dart und ändern Sie _initGoogleMobileAds(), um das SDK zu initialisieren, bevor die Startseite geladen wird.

Sie müssen den Rückgabetyp der Methode _initGoogleMobileAds() von Future<dynamic> in Future<InitializationStatus> ändern, um das Ergebnis der SDK-Initialisierung nach Abschluss zu erhalten.

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. Banneranzeige hinzufügen

In diesem Abschnitt wird oben auf dem Spielbildschirm eine Banneranzeige eingeblendet, wie im folgenden Screenshot zu sehen ist.

276b4cfa283ea6c7.png

  1. Öffnen Sie die Datei lib/game_route.dart und importieren Sie ad_manager.dart.
  2. Importieren Sie ad_helper.dart und google_mobile_ads.dart, indem Sie die folgenden Zeilen hinzufügen:

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. Fügen Sie der Klasse _GameRouteState die folgenden Elemente für ein Banner hinzu.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. Erstellen und laden Sie in der Methode initState() ein BannerAd für das Banner mit der Größe 320 × 50 (AdSize.banner). Ein Anzeigen-Event-Listener wird konfiguriert, um die Benutzeroberfläche (setState()) zu aktualisieren, wenn eine Anzeige geladen wird .

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. Ändern Sie die build()-Methode, um eine Banneranzeige zu präsentieren, wenn sie verfügbar ist.

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. Geben Sie die Ressource frei, die dem BannerAd-Objekt zugeordnet ist, indem Sie die Methode BannerAd.dispose() in der Callback-Methode dispose() aufrufen.

lib/game_route.dart

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

  ...

  super.dispose();
}

Geschafft! Führen Sie das Projekt aus und starten Sie ein neues Spiel. Nachdem eine Anzeige geladen wurde, sehen Sie oben auf dem Bildschirm ein Banner.

276b4cfa283ea6c7.png

8. Interstitial-Anzeige hinzufügen

In diesem Abschnitt wird nach Abschluss des Spiels (insgesamt 5 Level) ein Interstitial eingeblendet.

  1. Öffnen Sie die Datei lib/game_route.dart.
  2. Fügen Sie der Klasse _GameRouteState die folgenden Elemente und Methoden für ein Interstitial hinzu.

Ein Listener für Anzeigenereignisse ist so konfiguriert, dass geprüft wird, ob die Anzeige bereit ist (onAdLoaded() und onAdFailedToLoad()), und der Startbildschirm der App angezeigt wird, wenn die Anzeige geschlossen wird (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 diesem Codelab wird eine Interstitial-Anzeige eingeblendet, nachdem ein Nutzer 5 Levels abgeschlossen hat. Um unnötige Anzeigenanfragen zu minimieren, sollten Sie eine Anzeige anfordern, wenn ein Nutzer Level 3 erreicht.

Fügen Sie in der Methode onNewLevel() die folgenden Zeilen hinzu.

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. Wenn ein Spiel beendet ist, wird das Dialogfeld mit dem Spielergebnis angezeigt. Wenn ein Nutzer das Dialogfeld schließt, wird er zum Startbildschirm von Awesome Drawing Quiz weitergeleitet.

Da Interstitial-Anzeigen zwischen Bildschirmübergängen präsentiert werden sollten, wird die Interstitial-Anzeige eingeblendet, wenn ein Nutzer auf die Schaltfläche SCHLIESSEN klickt.

Ändern Sie die Methode onGameOver() so:

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. Geben Sie die Ressource frei, die dem InterstitialAd-Objekt zugeordnet ist, indem Sie die Methode InterstitialAd.dispose() in der Callback-Methode dispose() aufrufen.

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Geschafft! Führen Sie das Projekt aus und spielen Sie das Spiel durch. Wenn eine Interstitial-Anzeige geladen wird, sehen Sie sie, sobald Sie im Dialogfeld mit der Punktzahl auf die Schaltfläche SCHLIESSEN klicken.

c546e438c405e941.gif

9. Anzeige mit Prämie hinzufügen

In diesem Abschnitt fügen Sie eine Anzeige mit Prämie hinzu, mit der ein Nutzer als Prämie einen zusätzlichen Hinweis erhält.

  1. Öffnen Sie die Datei lib/game_route.dart.
  2. Fügen Sie in der Klasse _GameRouteState Mitglieder für eine Anzeige mit Prämie hinzu und implementieren Sie die Methode _loadRewardedAd(). Beachten Sie, dass beim Schließen der Anzeige (onAdDismissedFullScreenContent) eine weitere Anzeige mit Prämie geladen wird, um sie so früh wie möglich im Cache zu speichern.

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. Rufen Sie _loadRewardedAd() über die Methode initState() auf, um eine Anzeige mit Prämie anzufordern, wenn das Spiel gestartet wird.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. Nutzer können sich eine Anzeige mit Prämie ansehen, indem sie auf die schwebende Aktionsschaltfläche klicken. Die Schaltfläche wird nur angezeigt, wenn ein Nutzer auf dem aktuellen Level noch keinen Hinweis verwendet hat und eine Anzeige mit Prämie geladen ist.

Ändern Sie die _buildFloatingActionButton()-Methode so, dass die schwebende Aktionsschaltfläche angezeigt wird: Wenn Sie null zurückgeben, wird die Schaltfläche auf dem Bildschirm ausgeblendet.

onUserEarnedReward ist das wichtigste Anzeigenereignis in einer Anzeige mit Prämie. Wird ausgelöst, wenn ein Nutzer Anspruch auf eine Prämie hat, z. B. wenn er ein Video bis zum Ende angesehen hat.

In diesem Codelab wird die Methode QuizManager.instance.useHint() über den Callback aufgerufen, wodurch ein weiteres Zeichen im Hinweisstring angezeigt wird. Die App lädt eine Prämienanzeige im onAdClosed-Callback neu, damit die Anzeige so früh wie möglich bereit ist.

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. Geben Sie die Ressource frei, die dem RewardedAd-Objekt zugeordnet ist, indem Sie die Methode RewardedAd.dispose() in der Callback-Methode dispose() aufrufen.

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Geschafft! Führen Sie das Projekt aus und spielen Sie das Spiel. Sobald eine Anzeige mit Prämie geladen wurde, wird unten auf dem Bildschirm eine Schaltfläche mit einem Hinweis angezeigt. Klicken Sie auf die Schaltfläche Hinweis, um einen zusätzlichen Hinweis zu erhalten.

4a114d243ae3e71d.gif

10. Fertig!

Sie haben das Codelab abgeschlossen. Den vollständigen Code für dieses Codelab finden Sie im Ordner android_studio_folder.pngcomplete.

Im Codelab AdMob-Banner und native Inline-Anzeigen in eine Flutter-App einfügen erfahren Sie, wie Sie Banner- und native Inline-Anzeigen implementieren.

Weitere Informationen finden Sie in den anderen Flutter-Codelabs.