Добавление рекламы 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 Стартовый код — это начальный код, который вы будете создавать в этом практическом занятии.
  • android_studio_folder.png завершено — Код для данной практической работы завершен.

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

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

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

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

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

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

ddafee37a6f92229.png

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

b918bf44362813a9.png

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

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

  1. Выберите «Awesome Drawing Quiz» в меню «Приложения» в консоли 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/идентификатор рекламного блока

Элемент

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

Идентификатор приложения AdMob

ca-app-pub-3940256099942544~3347511713

Баннер

ca-app-pub-3940256099942544/6300978111

Интерстициальный

ca-app-pub-3940256099942544/1033173712

Награжден

ca-app-pub-3940256099942544/5224354917

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

Элемент

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

Идентификатор приложения AdMob

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

...

Нажмите «Опубликовать», чтобы установить плагин в проекте 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

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

Обратите внимание, что для получения результата инициализации SDK после её завершения необходимо изменить тип возвращаемого значения метода _initGoogleMobileAds() с Future<dynamic> на 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. Добавьте баннерную рекламу.

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

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

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

Измените метод 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. Всё готово!

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

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

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