Добавление рекламы AdMob в приложение Flutter

1. Введение

Что ты построишь

Эта лаборатория кода поможет вам добавить баннер, межстраничную рекламу и рекламу с вознаграждением в приложение Awesome Drawing Quiz — игру, которая позволяет игрокам угадывать название рисунка.

Если при работе с этой лабораторией кода у вас возникнут какие-либо проблемы (ошибки в коде, грамматические ошибки, неясные формулировки), сообщите об этом, нажав ссылку «Сообщить об ошибке» в левом нижнем углу лабораторий кода.

Что вы узнаете

  • Как настроить плагин Google Mobile Ads AdMob
  • Как реализовать баннер, межстраничную рекламу и рекламу с вознаграждением в приложении Flutter

Что вам понадобится

  • Android Studio 4.1 или новее
  • Xcode 12 или новее (для разработки под iOS)

Как бы вы оценили свой опыт работы с AdMob?

Новичок Средний Опытный

Как бы вы оценили свой уровень опыта работы с Flutter?

Новичок Средний Опытный

2. Настройте среду разработки Flutter.

Для выполнения этой лабораторной работы вам понадобятся два программного обеспечения — Flutter SDK и редактор .

Вы можете запустить кодовую лабораторию, используя любое из этих устройств:

  • Физическое устройство Android или iOS , подключенное к вашему компьютеру и переведенное в режим разработчика.
  • Симулятор iOS (требуется установка инструментов Xcode).
  • Эмулятор Android (требуется установка в Android Studio).
  • Браузер (для отладки необходим Chrome).
  • В качестве настольного приложения для Windows , Linux или macOS . Вы должны разрабатывать на платформе, на которой планируете развернуть. Итак, если вы хотите разработать классическое приложение для Windows, вам необходимо разработать его в Windows, чтобы получить доступ к соответствующей цепочке сборки. Существуют требования, специфичные для операционной системы, которые подробно описаны на docs.flutter.dev/desktop .

Загрузите код

После загрузки zip-файла извлеките его содержимое. У вас будет папка с именем admob-ads-in-flutter-master .

Альтернативно вы можете клонировать репозиторий GitHub из командной строки:

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

Репозиторий содержит две папки:

  • android_studio_folder.png starter — Начальный код, который вы создадите в этой лаборатории кода.
  • android_studio_folder.png Complete — Завершенный код для этой лаборатории кода.

3. Настройте приложение AdMob и рекламные блоки.

Поскольку Flutter — это многоплатформенный SDK, вам необходимо добавить в AdMob приложение и рекламные блоки как для Android, так и для iOS.

Настройка для Android

Чтобы настроить Android, вам необходимо добавить приложение Android и создать рекламные блоки.

Добавить приложение для Android

  1. В консоли AdMob нажмите «ДОБАВИТЬ ПРИЛОЖЕНИЕ» в меню «Приложения» .
  2. Когда вас спросят , опубликовали ли вы свое приложение в Google Play или App Store? , нажмите НЕТ .
  3. Введите Awesome Drawing Quiz в поле имени приложения и выберите Android в качестве платформы.

ddafee37a6f92229.png

  1. Для завершения этой лаборатории не требуется включение пользовательских метрик. Однако мы рекомендуем вам это сделать, поскольку это позволит вам более детально понять поведение пользователя. Нажмите ДОБАВИТЬ , чтобы завершить процесс.

b918bf44362813a9.png

Создать рекламные блоки

Чтобы начать добавлять рекламные блоки в AdMob:

  1. Выберите «Потрясающий тест по рисованию» в меню «Приложения» консоли AdMob .
  2. Откройте меню «Рекламные блоки» .

Баннер

  1. Нажмите кнопку «ДОБАВИТЬ РЕКЛАМНЫЙ БЛОК» .
  2. Выберите Баннер в качестве формата.
  3. Введите android-adq-banner в поле «Название рекламного блока» .
  4. Нажмите СОЗДАТЬ РЕКЛАМНЫЙ БЛОК , чтобы завершить процесс.

Межстраничный

  1. Нажмите кнопку «ДОБАВИТЬ РЕКЛАМНЫЙ БЛОК» .
  2. В качестве формата выберите Межстраничный .
  3. Введите android-adq-interstitial в поле «Название рекламного блока» .
  4. Нажмите СОЗДАТЬ РЕКЛАМНЫЙ БЛОК , чтобы завершить процесс.

Награжден

  1. Нажмите кнопку «ДОБАВИТЬ РЕКЛАМНЫЙ БЛОК» .
  2. Выберите «С вознаграждением» в качестве формата.
  3. Введите android-adq-rewarded в поле «Название рекламного блока» .
  4. Оставьте значение по умолчанию для настроек вознаграждения .
  5. Нажмите СОЗДАТЬ РЕКЛАМНЫЙ БЛОК , чтобы завершить процесс.

Обычно новому рекламному блоку требуется несколько часов, чтобы начать показ объявлений.

Если вы хотите немедленно протестировать поведение объявления, используйте идентификатор тестового приложения и идентификаторы рекламных блоков, указанные в таблицах «Идентификатор приложения для Android/идентификатор рекламного блока» и «Идентификатор приложения для iOS/идентификатор рекламного блока».

Настройка для iOS

Чтобы настроить iOS, вам необходимо добавить приложение для iOS и создать рекламные блоки.

Добавить приложение для iOS

  1. В консоли AdMob нажмите «ДОБАВИТЬ ПРИЛОЖЕНИЕ» в меню «Приложения» .
  2. Когда вас спросят , опубликовали ли вы свое приложение в Google Play или App Store? , нажмите НЕТ .
  3. Введите Awesome Drawing Quiz в поле имени приложения и выберите iOS в качестве платформы.

93e7f9f114232402.png

  1. Для завершения этой лаборатории не требуется включение пользовательских метрик. Однако мы рекомендуем вам это сделать, поскольку это позволит вам более детально понять поведение пользователя. Нажмите ДОБАВИТЬ , чтобы завершить процесс.

b918bf44362813a9.png

Создать рекламные блоки

Чтобы добавить рекламные блоки:

  1. Выберите приложение Awesome Drawing Quiz в меню «Приложения» в консоли AdMob .
  2. Откройте меню «Рекламные блоки» .

Баннер

  1. Нажмите кнопку «ДОБАВИТЬ РЕКЛАМНЫЙ БЛОК» .
  2. Выберите Баннер в качестве формата.
  3. Введите ios-adq-banner в поле «Название рекламного блока» .
  4. Нажмите СОЗДАТЬ РЕКЛАМНЫЙ БЛОК , чтобы завершить процесс.

Межстраничный

  1. Нажмите кнопку «ДОБАВИТЬ РЕКЛАМНЫЙ БЛОК» .
  2. В качестве формата выберите Межстраничный .
  3. Введите ios-adq-interstitial в поле «Название рекламного блока» .
  4. Нажмите СОЗДАТЬ РЕКЛАМНЫЙ БЛОК , чтобы завершить процесс.

Награжден

  1. Нажмите кнопку «ДОБАВИТЬ РЕКЛАМНЫЙ БЛОК» .
  2. Выберите «С вознаграждением» в качестве формата.
  3. Введите ios-adq-rewarded в поле «Название рекламного блока» .
  4. Оставьте значение по умолчанию для настроек вознаграждения .
  5. Нажмите СОЗДАТЬ РЕКЛАМНЫЙ БЛОК , чтобы завершить процесс.

Обычно новому рекламному блоку требуется несколько часов, чтобы начать показ объявлений.

Если вы хотите немедленно протестировать поведение объявления, используйте идентификатор тестового приложения и идентификаторы рекламных блоков, перечисленные в следующей таблице.

Необязательно: используйте тестовое приложение AdMob и рекламные блоки.

Если вы хотите следовать кодовой лаборатории вместо того, чтобы создавать новое приложение и рекламные блоки самостоятельно, вы можете использовать тестовый идентификатор приложения AdMob и идентификаторы рекламных блоков, перечисленные в следующих таблицах.

Идентификатор приложения Android/идентификатор рекламного блока

Элемент

Идентификатор приложения/идентификатор рекламного блока

Идентификатор приложения Рекламы в приложении

ca-app-pub-3940256099942544~3347511713

Баннер

ca-app-pub-3940256099942544/6300978111

Межстраничный

ca-app-pub-3940256099942544/1033173712

Награжден

ca-app-pub-3940256099942544/5224354917

Идентификатор приложения iOS/идентификатор рекламного блока

Элемент

Идентификатор приложения/идентификатор рекламного блока

Идентификатор приложения Рекламы в приложении

ca-app-pub-3940256099942544~1458002511

Баннер

ca-app-pub-3940256099942544/2934735716

Межстраничный

ca-app-pub-3940256099942544/4411468910

Награжден

ca-app-pub-3940256099942544/1712485313

Дополнительные сведения о тестовых объявлениях см. в тестовых объявлениях для Android и документации для разработчиков тестовых объявлений для iOS .

4. Добавьте плагин Google Mobile Ads Flutter.

Flutter использует плагины для обеспечения доступа к широкому спектру сервисов, специфичных для платформы. Плагины позволяют вам получить доступ к сервисам и API на каждой платформе.

Плагин google_mobile_ads поддерживает загрузку и отображение баннеров, межстраничных объявлений, объявлений с вознаграждением и нативной рекламы с помощью API AdMob.

Поскольку Flutter — это мультиплатформенный SDK, плагин google_mobile_ads применим как для iOS, так и для Android. Итак, если вы добавите плагин в свое приложение Flutter, он будет использоваться версиями приложения встроенной рекламы AdMob как для Android, так и для iOS.

Добавьте плагин Google Mobile Ads в качестве зависимости.

Чтобы получить доступ к API AdMob из проекта встроенных объявлений AdMob , добавьте google_mobile_ads в качестве зависимости к файлу pubspec.yaml , расположенному в корне проекта.

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

...

Нажмите «Pub get» , чтобы установить плагин в проект Awesome Drawing Quiz .

9ce73858eedbd8fc.png

Обновите AndroidManifest.xml (Android)

  1. Откройте файл android/app/src/main/AndroidManifest.xml в Android Studio.
  2. Добавьте идентификатор приложения AdMob, добавив тег <meta-data> с именем com.google.android.gms.ads.APPLICATION_ID . Например, если идентификатор вашего приложения AdMob — ca-app-pub-3940256099942544~3347511713 , вам необходимо добавить следующие строки в файл 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>

Обновить Info.plist (iOS)

  1. Откройте файл ios/Runner/Info.plist в Android Studio.
  2. Добавьте ключ GADApplicationIdentifier со строковым значением идентификатора вашего приложения AdMob. Например, если идентификатор вашего приложения AdMob — ca-app-pub-3940256099942544~1458002511 , вам необходимо добавить следующие строки в файл Info.plist .

iOS/Runner/Info.plist 

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

5. Добавьте вспомогательный класс для рекламы

Создайте новый файл с именем ad_helper.dart в каталоге lib . Затем реализуйте класс AdHelper , который предоставляет идентификатор приложения AdMob и идентификаторы рекламных блоков для Android и iOS.

Обязательно замените идентификатор приложения AdMob ( ca-app-pub-xxxxxx~yyyyy ) и идентификатор рекламного блока ( ca-app-pub-xxxxxxx/yyyyyyyy ) на идентификаторы, созданные на предыдущем шаге.

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

Используйте следующий фрагмент кода, если вы хотите использовать тестовый идентификатор приложения AdMob и тестовые идентификаторы рекламных блоков.

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. Инициализируйте SDK Google Mobile Ads.

Перед загрузкой рекламы необходимо инициализировать Google Mobile Ads SDK. Откройте файл lib/home_route.dart и измените _initGoogleMobileAds() чтобы инициализировать SDK перед загрузкой домашней страницы.

Обратите внимание, что вам необходимо изменить тип возвращаемого значения метода _initGoogleMobileAds() с Future<dynamic> на Future<InitializationStatus> , чтобы получить результат инициализации SDK после ее завершения.

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. Добавьте рекламный баннер

В этом разделе вы отображаете рекламный баннер в верхней части игрового экрана, как показано на следующем снимке экрана.

276b4cfa283ea6c7.png

  1. Откройте файл lib/game_route.dart и импортируйте ad_manager.dart
  2. Импортируйте ad_helper.dart и google_mobile_ads.dart добавив следующие строки:

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. В классе _GameRouteState добавьте следующие элементы для рекламного баннера.

lib/game_route.dart 

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. В методе initState() создайте и загрузите BannerAd для баннера 320x50 ( AdSize.banner ). Обратите внимание, что прослушиватель рекламных событий настроен на обновление пользовательского интерфейса ( setState() ) при загрузке объявления.

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. Измените метод build() , чтобы отображать рекламный баннер, когда он доступен.

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. Освободите ресурс, связанный с объектом BannerAd , вызвав метод BannerAd.dispose() в методе обратного вызова dispose() .

lib/game_route.dart 

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

  ...

  super.dispose();
}

Вот и все! Запустите проект и начните новую игру. После загрузки объявления вы увидите рекламный баннер в верхней части экрана.

276b4cfa283ea6c7.png

8. Добавьте межстраничную рекламу

В этом разделе вы показываете межстраничную рекламу после завершения игры (всего 5 уровней).

  1. Откройте файл lib/game_route.dart
  2. В класс _GameRouteState добавьте следующие члены и методы для межстраничной рекламы.

Обратите внимание, что прослушиватель рекламных событий настроен на проверку готовности объявления ( onAdLoaded() и onAdFailedToLoad() ) и отображение главного экрана приложения при закрытии объявления ( 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. В этой кодовой лаборатории межстраничная реклама отображается после того, как пользователь проходит 5 уровней. Чтобы свести к минимуму ненужные запросы рекламы, запрашивайте рекламу, когда пользователь достигает уровня 3.

В методе onNewLevel() добавьте следующие строки.

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. Когда игра заканчивается, отображается диалоговое окно счета игры. Когда пользователь закрывает диалоговое окно, он перенаправляется на главный экран викторины «Потрясающее рисование» .

Поскольку межстраничная реклама должна отображаться между переходами экрана, мы показываем ее, когда пользователь нажимает кнопку ЗАКРЫТЬ .

Измените метод onGameOver() следующим образом.

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. Освободите ресурс, связанный с объектом InterstitialAd , вызвав метод InterstitialAd.dispose() в методе обратного вызова dispose() .

lib/game_route.dart 

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Вот и все! Запустите проект и завершите игру. Если загружено межстраничное объявление, вы увидите его, как только нажмете кнопку ЗАКРЫТЬ в диалоговом окне оценки.

c546e438c405e941.gif

9. Добавьте объявление с вознаграждением

В этом разделе вы добавляете объявление с вознаграждением, которое дает пользователю дополнительную подсказку в качестве вознаграждения.

  1. Откройте файл lib/game_route.dart
  2. В классе _GameRouteState добавьте элементы для рекламы с вознаграждением и реализуйте метод _loadRewardedAd() . Обратите внимание, что при закрытии объявления загружается другое объявление с вознаграждением ( onAdDismissedFullScreenContent ), чтобы кэшировать объявление как можно раньше.

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. Вызовите _loadRewardedAd() из метода initState() , чтобы запросить рекламу с вознаграждением при запуске игры.

lib/game_route.dart 

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. Разрешите пользователям смотреть рекламу с вознаграждением, нажав кнопку плавающего действия. Кнопка отображается только в том случае, если пользователь не использовал подсказку на текущем уровне и загружено объявление с вознаграждением.

Измените метод _buildFloatingActionButton() следующим образом, чтобы отобразить плавающую кнопку действия. Обратите внимание, что возврат null скрывает кнопку с экрана.

Обратите внимание, что onUserEarnedReward — самое важное рекламное событие в объявлении с вознаграждением. Он срабатывает, когда пользователь получает право на получение вознаграждения (например, закончил просмотр видео).

В этой кодовой лаборатории метод QuizManager.instance.useHint() вызывается из обратного вызова, который обнаруживает еще один символ в строке подсказки. Приложение перезагружает объявление с вознаграждением в обратном вызове onAdClosed чтобы убедиться, что объявление готово как можно раньше.

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. Освободите ресурс, связанный с объектом RewardedAd , вызвав метод RewardedAd.dispose() в методе обратного вызова dispose() .

lib/game_route.dart 

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Вот и все! Запустите проект и играйте в игру. После загрузки объявления с вознаграждением вы увидите кнопку с подсказкой в ​​нижней части экрана. Нажмите кнопку «Подсказка» , чтобы получить дополнительную подсказку.

4a114d243ae3e71d.gif

10. Все готово!

Вы завершили кодовую лабораторию. Вы можете найти готовый код для этой лаборатории кода в разделе android_studio_folder.png полная папка.

Чтобы узнать, как реализовать баннер и нативную встроенную рекламу, ознакомьтесь с лабораторной работой по добавлению баннера AdMob и нативной встроенной рекламы в кодовую лабораторию приложения Flutter .

Чтобы узнать больше, попробуйте другие лаборатории разработки кода Flutter .