Dodawanie reklam AdMob do aplikacji Flutter

1. Wprowadzenie

Co utworzysz

W tym samouczku dowiesz się, jak dodać do aplikacji o nazwie Awesome Drawing Quiz baner, reklamę pełnoekranową i reklamę z nagrodą. Jest to gra, w której gracze zgadują nazwę rysunku.

Jeśli podczas pracy z tym kursem napotkasz jakiekolwiek problemy (błędy w kodzie, błędy gramatyczne, niejasne sformułowania), zgłoś je, klikając link Zgłoś błąd w lewym dolnym rogu kursu.

Czego się nauczysz

  • Jak skonfigurować wtyczkę reklam mobilnych Google AdMob
  • Jak wdrożyć banery, reklamy pełnoekranowe i reklamy z nagrodą w aplikacji Flutter

Czego potrzebujesz

  • Android Studio w wersji 4.1 lub nowszej
  • Xcode 12 lub nowsza wersja (do tworzenia aplikacji na iOS)

Jak oceniasz swoje doświadczenie z AdMob?

Początkujący Średnio zaawansowany Zaawansowany

Jak oceniasz swoje doświadczenie z Flutterem?

Początkujący Średnio zaawansowany Zaawansowany

2. Konfigurowanie środowiska programistycznego Fluttera

Aby ukończyć ten moduł, potrzebujesz 2 programów: pakietu SDK Flutter i edytora.

Codelab możesz uruchomić na dowolnym z tych urządzeń:

  • fizyczne urządzenie z Android lub iOS podłączone do komputera i ustawione w trybie deweloperskim;
  • Symulator iOS (wymaga zainstalowania narzędzi Xcode).
  • Android Emulator (wymaga konfiguracji w Android Studio).
  • przeglądarka (do debugowania wymagana jest Chrome);
  • Jako aplikacja komputerowa na Windows, Linux lub macOS. Musisz tworzyć aplikację na platformie, na której zamierzasz ją wdrożyć. Jeśli chcesz opracować aplikację na komputery z systemem Windows, musisz to zrobić na komputerze z tym systemem, aby mieć dostęp do odpowiedniego łańcucha kompilacji. Istnieją wymagania dotyczące poszczególnych systemów operacyjnych, które są szczegółowo opisane na stronie docs.flutter.dev/desktop.

Pobieranie kodu

Po pobraniu pliku ZIP wyodrębnij jego zawartość. Zobaczysz folder o nazwie admob-ads-in-flutter-master.

Możesz też sklonować repozytorium GitHub z poziomu wiersza poleceń:

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

Repozytorium zawiera 2 foldery:

  • android_studio_folder.pngstarter – kod początkowy, który będziesz rozwijać w tym ćwiczeniu z programowania.
  • android_studio_folder.pngcomplete – ukończony kod do tych ćwiczeń z programowania.

3. Konfigurowanie aplikacji w AdMob i jednostek reklamowych

Flutter to pakiet SDK na wiele platform, dlatego w AdMob musisz dodać aplikację i jednostki reklamowe zarówno na Androida, jak i na iOS.

Konfigurowanie na Androidzie

Aby skonfigurować aplikację na Androida, musisz dodać aplikację na Androida i utworzyć jednostki reklamowe.

Dodawanie aplikacji na Androida

  1. W konsoli AdMob w menu Aplikacje kliknij DODAJ APLIKACJĘ.
  2. Gdy pojawi się pytanie Czy aplikacja została opublikowana w Google Play lub App Store?, kliknij NIE.
  3. Wpisz Awesome Drawing Quiz w polu nazwy aplikacji i jako platformę wybierz Android.

ddafee37a6f92229.png

  1. Włączenie danych o użytkownikach nie jest konieczne do ukończenia tego ćwiczenia. Zalecamy jednak, aby to zrobić, ponieważ pozwala to lepiej poznać zachowania użytkowników. Aby ukończyć proces, kliknij DODAJ.

b918bf44362813a9.png

Tworzenie jednostek reklamowych

Aby zacząć dodawać jednostki reklamowe do AdMob:

  1. W menu Aplikacje w konsoli AdMob wybierz Awesome Drawing Quiz.
  2. Kliknij menu Jednostki reklamowe.

Banner

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Baner.
  3. W polu Nazwa jednostki reklamowej wpisz android-adq-banner.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama pełnoekranowa

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama pełnoekranowa.
  3. W polu Nazwa jednostki reklamowej wpisz android-adq-interstitial.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama z nagrodą

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama z nagrodą.
  3. W polu Nazwa jednostki reklamowej wpisz android-adq-rewarded.
  4. Pozostaw domyślne ustawienia nagród.
  5. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Zanim nowa jednostka reklamowa zacznie wyświetlać reklamy, zwykle mija kilka godzin.

Jeśli chcesz od razu przetestować działanie reklamy, użyj identyfikatorów testowych aplikacji i jednostek reklamowych podanych w tabelach identyfikatorów aplikacji i jednostek reklamowych na Androida oraz iOS.

Konfigurowanie na urządzeniu z iOS

Aby skonfigurować usługę pod kątem iOS, musisz dodać aplikację na iOS i utworzyć jednostki reklamowe.

Dodawanie aplikacji na iOS

  1. W konsoli AdMob w menu Aplikacje kliknij DODAJ APLIKACJĘ.
  2. Gdy pojawi się pytanie Czy aplikacja została opublikowana w Google Play lub App Store?, kliknij NIE.
  3. iOS jako platformę.

93e7f9f114232402.png

  1. Włączenie danych o użytkownikach nie jest konieczne do ukończenia tego ćwiczenia. Zalecamy jednak, aby to zrobić, ponieważ pozwala to lepiej poznać zachowania użytkowników. Aby ukończyć proces, kliknij DODAJ.

b918bf44362813a9.png

Tworzenie jednostek reklamowych

Aby dodać jednostki reklamowe:

  1. W menu Aplikacje w konsoli AdMob wybierz aplikację Awesome Drawing Quiz.
  2. Kliknij menu Jednostki reklamowe.

Banner

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Baner.
  3. W polu Nazwa jednostki reklamowej wpisz ios-adq-banner.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama pełnoekranowa

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama pełnoekranowa.
  3. W polu Nazwa jednostki reklamowej wpisz ios-adq-interstitial.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama z nagrodą

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama z nagrodą.
  3. W polu Nazwa jednostki reklamowej wpisz ios-adq-rewarded.
  4. Pozostaw domyślne ustawienia nagród.
  5. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Zanim nowa jednostka reklamowa zacznie wyświetlać reklamy, zwykle mija kilka godzin.

Jeśli chcesz od razu przetestować działanie reklamy, użyj identyfikatora aplikacji testowej i identyfikatorów jednostek reklamowych podanych w tabeli poniżej.

Opcjonalnie: użyj testowej aplikacji w AdMob i jednostek reklamowych

Jeśli chcesz wykonać ćwiczenie z programowania zamiast tworzyć własną aplikację i jednostki reklamowe, możesz użyć testowych identyfikatorów aplikacji w AdMob i jednostek reklamowych podanych w tabelach poniżej.

Identyfikator aplikacji na Androida lub jednostki reklamowej

Produkt

Identyfikator aplikacji lub jednostki reklamowej

Identyfikator aplikacji w AdMob

ca-app-pub-3940256099942544~3347511713

Baner

ca-app-pub-3940256099942544/6300978111

Pełnoekranowa

ca-app-pub-3940256099942544/1033173712

Z nagrodą

ca-app-pub-3940256099942544/5224354917

Identyfikator aplikacji na iOS lub identyfikator jednostki reklamowej

Produkt

Identyfikator aplikacji lub jednostki reklamowej

Identyfikator aplikacji w AdMob

ca-app-pub-3940256099942544~1458002511

Baner

ca-app-pub-3940256099942544/2934735716

Pełnoekranowa

ca-app-pub-3940256099942544/4411468910

Z nagrodą

ca-app-pub-3940256099942544/1712485313

Więcej informacji o reklamach testowych znajdziesz w dokumentacji dla deweloperów dotyczącej reklam testowych na Androida i reklam testowych na iOS.

4. Dodawanie wtyczki reklam mobilnych Google do Fluttera

Flutter korzysta z wtyczek, aby zapewnić dostęp do szerokiej gamy usług specyficznych dla danej platformy. Wtyczki umożliwiają dostęp do usług i interfejsów API na każdej platformie.

Wtyczka google_mobile_ads obsługuje wczytywanie i wyświetlanie banerów, reklam pełnoekranowych, reklam z nagrodą i reklam natywnych za pomocą interfejsu AdMob API.

Flutter to pakiet SDK na wiele platform, więc wtyczka google_mobile_ads ma zastosowanie zarówno w przypadku iOS, jak i Androida. Jeśli więc dodasz wtyczkę do aplikacji Flutter, będzie ona używana zarówno w wersji aplikacji z reklamami wbudowanymi AdMob na Androida, jak i na iOS.

Dodawanie wtyczki reklam mobilnych Google jako zależności

Aby uzyskać dostęp do interfejsów API AdMob z projektu reklam wbudowanych AdMob, dodaj google_mobile_ads jako zależność do pliku pubspec.yaml znajdującego się w katalogu głównym projektu.

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

...

Kliknij Pub get, aby zainstalować wtyczkę w projekcie Awesome Drawing Quiz.

9ce73858eedbd8fc.png

Aktualizacja pliku AndroidManifest.xml (Android)

  1. Otwórz plik android/app/src/main/AndroidManifest.xml w Android Studio.
  2. Dodaj identyfikator aplikacji w AdMob, dodając tag <meta-data> o nazwie com.google.android.gms.ads.APPLICATION_ID. Jeśli na przykład identyfikator aplikacji w AdMob to ca-app-pub-3940256099942544~3347511713, musisz dodać te wiersze do pliku 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>

Aktualizowanie pliku Info.plist (iOS)

  1. Otwórz plik ios/Runner/Info.plist w Android Studio.
  2. Dodaj klucz GADApplicationIdentifier z identyfikatorem aplikacji w AdMob jako ciągiem znaków. Jeśli na przykład identyfikator aplikacji w AdMob to ca-app-pub-3940256099942544~1458002511, musisz dodać te wiersze do pliku Info.plist.

ios/Runner/Info.plist

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

5. Dodawanie klasy pomocniczej do reklam

Utwórz nowy plik o nazwie ad_helper.dart w katalogu lib. Następnie wdróż klasę AdHelper, która udostępnia identyfikator aplikacji w AdMob oraz identyfikatory jednostek reklamowych na Androida i iOS.

Pamiętaj, aby zastąpić identyfikator aplikacji w AdMob (ca-app-pub-xxxxxx~yyyyy) i identyfikator jednostki reklamowej (ca-app-pub-xxxxxxx/yyyyyyyy) identyfikatorami utworzonymi w poprzednim kroku.

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

Jeśli chcesz użyć testowego identyfikatora aplikacji w AdMob i testowych identyfikatorów jednostek reklamowych, użyj tego fragmentu kodu.

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. Inicjowanie pakietu SDK do reklam mobilnych Google

Zanim wczytasz reklamy, musisz zainicjować pakiet SDK do reklam mobilnych Google. Otwórz plik lib/home_route.dart i zmodyfikuj _initGoogleMobileAds(), aby zainicjować pakiet SDK przed wczytaniem strony głównej.

Pamiętaj, że aby uzyskać wynik inicjowania pakietu SDK po jego zakończeniu, musisz zmienić typ zwracany metody _initGoogleMobileAds() z Future<dynamic> na Future<InitializationStatus>.

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. Dodawanie reklamy banerowej

W tej sekcji u góry ekranu gry wyświetlasz baner reklamowy, jak pokazano na zrzucie ekranu poniżej.

276b4cfa283ea6c7.png

  1. Otwórz plik lib/game_route.dart i zaimportuj ad_manager.dart.
  2. Zaimportuj ad_helper.dart i google_mobile_ads.dart, dodając te wiersze:

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. W klasie _GameRouteState dodaj następujących członków w przypadku banera reklamowego.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. W metodzie initState() utwórz i wczytaj BannerAd dla banera o rozmiarze 320 x 50 (AdSize.banner). Pamiętaj, że detektor zdarzeń reklamy jest skonfigurowany tak, aby aktualizować interfejs (setState()) po wczytaniu reklamy .

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. Zmodyfikuj metodę build(), aby w razie dostępności wyświetlać baner reklamowy.

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. Zwolnij zasób powiązany z obiektem BannerAd, wywołując metodę BannerAd.dispose() w metodzie wywołania zwrotnego dispose().

lib/game_route.dart

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

  ...

  super.dispose();
}

To wszystko. Uruchom projekt i rozpocznij nową grę. Po wczytaniu reklamy u góry ekranu pojawi się baner reklamowy.

276b4cfa283ea6c7.png

8. Dodawanie reklamy pełnoekranowej

W tej sekcji wyświetlasz reklamę pełnoekranową po zakończeniu gry (5 poziomów).

  1. Otwórz plik lib/game_route.dart.
  2. W klasie _GameRouteState dodaj te elementy i metody dla reklamy pełnoekranowej.

Zwróć uwagę, że detektor zdarzeń reklamy jest skonfigurowany tak, aby sprawdzać, czy reklama jest gotowa (onAdLoaded() i onAdFailedToLoad()), oraz wyświetlać ekran główny aplikacji po zamknięciu reklamy (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. W tym laboratorium kodowania reklama pełnoekranowa jest wyświetlana po ukończeniu przez użytkownika 5 poziomów. Aby zminimalizować liczbę niepotrzebnych żądań reklamy, wysyłaj żądanie reklamy, gdy użytkownik osiągnie poziom 3.

W metodzie onNewLevel() dodaj te wiersze.

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. Po zakończeniu gry wyświetli się okno z wynikiem. Gdy użytkownik zamknie to okno, zostanie przekierowany na ekran główny Awesome Drawing Quiz.

Reklamy pełnoekranowe powinny wyświetlać się między przejściami między ekranami, dlatego wyświetlamy je, gdy użytkownik kliknie przycisk ZAMKNIJ.

Zmodyfikuj metodę onGameOver() w ten sposób:

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. Zwolnij zasób powiązany z obiektem InterstitialAd, wywołując metodę InterstitialAd.dispose() w metodzie wywołania zwrotnego dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

To wszystko. Uruchom projekt i ukończ grę. Jeśli reklama pełnoekranowa zostanie wczytana, po kliknięciu przycisku ZAMKNIJ w oknie wyniku zobaczysz reklamę pełnoekranową.

c546e438c405e941.gif

9. Dodawanie reklamy z nagrodą

W tej sekcji dodasz reklamę z nagrodą, która w zamian za obejrzenie reklamy daje użytkownikowi dodatkową podpowiedź.

  1. Otwórz plik lib/game_route.dart.
  2. W klasie _GameRouteState dodaj użytkowników do reklamy z nagrodą i wdroż metodę _loadRewardedAd(). Pamiętaj, że po zamknięciu reklamy (onAdDismissedFullScreenContent) wczytuje ona kolejną reklamę z nagrodą, aby jak najszybciej zapisać ją w pamięci podręcznej.

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. Aby poprosić o reklamę z nagrodą po uruchomieniu gry, wywołaj metodę _loadRewardedAd() z metody initState().

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. Umożliwiaj użytkownikom obejrzenie reklamy z nagrodą po kliknięciu pływającego przycisku polecenia (FAB). Przycisk jest widoczny tylko wtedy, gdy użytkownik nie skorzystał z podpowiedzi na bieżącym poziomie i reklama z nagrodą jest wczytana.

Zmodyfikuj metodę _buildFloatingActionButton() w ten sposób, aby wyświetlić pływający przycisk działania. Pamiętaj, że powrót null ukrywa przycisk na ekranie.

Pamiętaj, że onUserEarnedReward to najważniejsze zdarzenie reklamowe w reklamie z nagrodą. Jest wywoływane, gdy użytkownik kwalifikuje się do otrzymania nagrody (np. po obejrzeniu filmu do końca).

W tym ćwiczeniu z programowania metoda QuizManager.instance.useHint() jest wywoływana z wywołania zwrotnego, co powoduje ujawnienie kolejnego znaku w ciągu podpowiedzi. Aplikacja ponownie wczytuje reklamę z nagrodą w onAdClosed wywołaniu zwrotnym, aby mieć pewność, że reklama będzie gotowa jak najszybciej.

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. Zwolnij zasób powiązany z obiektem RewardedAd, wywołując metodę RewardedAd.dispose() w metodzie wywołania zwrotnego dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

To wszystko. Uruchom projekt i zagraj w grę. Gdy reklama z nagrodą zostanie wczytana, u dołu ekranu pojawi się przycisk podpowiedzi. Aby uzyskać dodatkową wskazówkę, kliknij przycisk Wskazówka.

4a114d243ae3e71d.gif

10. Wszystko gotowe

To już koniec tego laboratorium. Ukończony kod tego ćwiczenia znajdziesz w folderze android_studio_folder.pngcomplete.

Aby dowiedzieć się, jak wdrożyć baner i reklamy natywne w treści, zapoznaj się z ćwiczeniem Dodawanie banera AdMob i reklam natywnych w treści do aplikacji Flutter.

Aby dowiedzieć się więcej, wypróbuj inne codelaby Fluttera.