Menambahkan iklan AdMob ke aplikasi Flutter

1. Pengantar

Yang akan Anda buat

Codelab ini memandu Anda dalam menambahkan iklan banner, interstisial, dan reward ke aplikasi bernama Awesome Drawing Quiz, sebuah game yang memungkinkan pemain menebak nama dari gambaran tersebut.

Jika Anda mengalami masalah (bug kode, kesalahan tata bahasa, kata-kata yang tidak jelas) saat mengerjakan codelab ini, laporkan masalah tersebut dengan mengklik link Laporkan kesalahan di sudut kiri bawah codelab.

Yang akan Anda pelajari

  • Cara mengonfigurasi plugin AdMob Google Mobile Ads
  • Cara menerapkan iklan banner, interstisial, dan reward di aplikasi Flutter

Yang akan Anda perlukan

  • Android Studio 4.1 atau yang lebih baru
  • Xcode 12 atau yang lebih baru (untuk pengembangan iOS)

Menurut Anda, bagaimana tingkat pengalaman Anda dengan AdMob?

Pemula Menengah Mahir

Menurut Anda, bagaimana tingkat pengalaman Anda dengan Flutter?

Pemula Menengah Mahir

2. Menyiapkan lingkungan pengembangan Flutter Anda

Anda memerlukan dua software untuk menyelesaikan lab ini—Flutter SDK dan editor.

Anda dapat menjalankan codelab menggunakan salah satu perangkat berikut:

  • Perangkat Android atau iOS fisik yang terhubung ke komputer dan disetel ke mode Developer.
  • Simulator iOS (perlu menginstal alat Xcode).
  • Android Emulator (memerlukan penyiapan di Android Studio).
  • Browser (Chrome diperlukan untuk proses debug).
  • Sebagai aplikasi desktop Windows, Linux, atau macOS. Anda harus melakukan pengembangan di platform tempat Anda berencana men-deploy aplikasi. Jadi, jika ingin mengembangkan aplikasi desktop Windows, Anda harus mengembangkannya di Windows untuk mengakses rangkaian build yang sesuai. Ada persyaratan khusus sistem operasi yang dicakup secara mendetail pada docs.flutter.dev/desktop.

Download kodenya

Setelah Anda mengunduh file zip, ekstrak isinya. Anda akan memiliki folder bernama admob-ads-in-flutter-master.

Atau, Anda dapat melakukan clone pada repositori GitHub dari command line:

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

Repositori berisi dua folder:

  • android_studio_folder.pngstarter — Memulai kode yang akan Anda buat di codelab ini.
  • android_studio_folder.pngcomplete — Kode lengkap untuk codelab ini.

3. Menyiapkan aplikasi AdMob dan unit iklan

Karena Flutter adalah SDK multi-platform, Anda perlu menambahkan aplikasi dan unit iklan untuk Android dan iOS di AdMob.

Penyiapan untuk Android

Untuk menyiapkan Android, Anda perlu menambahkan aplikasi Android dan membuat unit iklan.

Menambahkan aplikasi Android

  1. Di konsol AdMob, klik TAMBAHKAN APLIKASI dari menu Aplikasi.
  2. Saat Anda ditanya Sudahkah Anda menerbitkan aplikasi di Google Play atau App Store?, klik TIDAK.
  3. Masukkan Awesome Drawing Quiz di bidang nama aplikasi, dan pilih Android sebagai platform.

ddafee37a6f92229.png

  1. Tidak perlu mengaktifkan metrik pengguna untuk menyelesaikan codelab ini. Namun, sebaiknya Anda memahami perilaku pengguna secara lebih mendetail. Klik TAMBAH untuk menyelesaikan proses.

b918bf44362813a9.png

Membuat unit iklan

Untuk menambahkan unit iklan ke AdMob:

  1. Pilih Awesome Drawing Quiz dari menu Aplikasi di konsol AdMob.
  2. Klik menu Unit iklan.

Banner

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Banner sebagai format.
  3. Masukkan android-adq-banner di bidang Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan proses.

Interstisial

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Interstisial sebagai format.
  3. Masukkan android-adq-interstitial di bidang Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan proses.

Reward

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Reward sebagai format.
  3. Masukkan android-adq-rewarded di bidang Nama unit iklan.
  4. Biarkan default untuk Setelah reward.
  5. Klik BUAT UNIT IKLAN untuk menyelesaikan proses.

Biasanya perlu waktu beberapa jam agar unit iklan baru dapat menayangkan iklan.

Jika Anda ingin segera menguji perilaku iklan, gunakan ID aplikasi dan ID unit iklan percobaan yang tercantum di tabel ID aplikasi Android/ID unit iklan dan ID aplikasi iOS/ID unit iklan.

Penyiapan untuk iOS

Untuk menyiapkan iOS, Anda perlu menambahkan aplikasi iOS dan membuat unit iklan.

Menambahkan aplikasi iOS

  1. Di konsol AdMob, klik TAMBAHKAN APLIKASI dari menu Aplikasi.
  2. Saat Anda ditanya Sudahkah Anda menerbitkan aplikasi di Google Play atau App Store?, klik TIDAK.
  3. Masukkan Awesome Drawing Quiz di bidang nama aplikasi, dan pilih iOS sebagai platform.

93e7f9f114232402.png

  1. Tidak perlu mengaktifkan metrik pengguna untuk menyelesaikan codelab ini. Namun, sebaiknya Anda memahami perilaku pengguna secara lebih mendetail. Klik TAMBAH untuk menyelesaikan proses.

b918bf44362813a9.png

Membuat unit iklan

Untuk menambahkan unit iklan:

  1. Pilih aplikasi Awesome Drawing Quiz dari menuAplikasi di konsol AdMob.
  2. Klik menu Unit iklan.

Banner

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Banner sebagai format.
  3. Masukkan ios-adq-banner di bidang Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan proses.

Interstisial

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Interstisial sebagai format.
  3. Masukkan ios-adq-interstitial di bidang Nama unit iklan.
  4. Klik BUAT UNIT IKLAN untuk menyelesaikan proses.

Reward

  1. Klik tombol TAMBAHKAN UNIT IKLAN.
  2. Pilih Reward sebagai format.
  3. Masukkan ios-adq-rewarded di bidang Nama unit iklan.
  4. Biarkan default untuk Setelah reward.
  5. Klik BUAT UNIT IKLAN untuk menyelesaikan proses.

Biasanya perlu waktu beberapa jam agar unit iklan baru dapat menayangkan iklan.

Jika Anda ingin segera menguji perilaku iklan, gunakan ID aplikasi dan ID unit iklan percobaan yang tercantum dalam tabel berikut.

Opsional: Menggunakan aplikasi AdMob dan unit iklan percobaan

Jika Anda ingin mengikuti codelab alih-alih membuat sendiri aplikasi dan unit iklan baru, Anda dapat menggunakan ID aplikasi AdMob dan ID unit iklan percobaan yang tercantum dalam tabel berikut.

ID aplikasi Android/ID unit iklan

Item

ID aplikasi/ID unit iklan

ID aplikasi AdMob

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Interstisial

ca-app-pub-3940256099942544/1033173712

Reward

ca-app-pub-3940256099942544/5224354917

ID aplikasi iOS/ID unit iklan

Item

ID aplikasi/ID unit iklan

ID aplikasi AdMob

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Interstisial

ca-app-pub-3940256099942544/4411468910

Reward

ca-app-pub-3940256099942544/1712485313

Untuk informasi selengkapnya tentang iklan percobaan, lihat dokumentasi developer Iklan percobaan Android dan Iklan percobaan iOS.

4. Menambahkan plugin Flutter Google Mobile Ads

Flutter menggunakan plugin untuk menyediakan akses ke berbagai layanan khusus platform. Plugin memungkinkan Anda mengakses layanan dan API di setiap platform.

Plugin google_mobile_ads mendukung pemuatan dan penampilan iklan banner, interstisial, reward, dan native menggunakan AdMob API.

Karena Flutter adalah SDK multi-platform, plugin google_mobile_ads berlaku untuk iOS dan Android. Jadi, jika Anda menambahkan plugin ke aplikasi Flutter, plugin ini digunakan oleh aplikasi iklan inline AdMob versi Android dan iOS.

Menambahkan plugin Google Mobile Ads sebagai dependensi

Untuk mengakses AdMob API dari proyek Iklan inline AdMob, tambahkan google_mobile_ads sebagai dependensi ke file pubspec.yaml yang terletak di akar proyek.

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

...

Klik Pub get untuk menginstal plugin di proyek Awesome Drawing Quiz.

9ce73858eedbd8fc.png

Mengupdate AndroidManifest.xml (Android)

  1. Buka file android/app/src/main/AndroidManifest.xml di Android Studio.
  2. Tambahkan ID aplikasi AdMob Anda dengan menambahkan tag <meta-data> yang disertai nama com.google.android.gms.ads.APPLICATION_ID. Misalnya, jika Id aplikasi AdMob adalah ca-app-pub-3940256099942544~3347511713, Anda perlu menambahkan baris berikut ke file AndroidManifest.xml.

AndroidManifest.xml

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

</manifest>

Mengupdate Info.plist (iOS)

  1. Buka file ios/Runner/Info.plist di Android Studio.
  2. Tambahkan kunci GADApplicationIdentifier dengan nilai string ID aplikasi AdMob. Misalnya, jika Id aplikasi AdMob adalah ca-app-pub-3940256099942544~1458002511, Anda perlu menambahkan baris berikut ke file Info.plist.

ios/Runner/Info.plist

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

5. Menambahkan kelas bantuan untuk iklan

Buat file baru bernama ad_helper.dart di bawah direktori lib. Kemudian, terapkan kelas AdHelper tersebut, yang menyediakan ID aplikasi AdMob dan ID unit iklan untuk Android dan iOS.

Pastikan Anda mengganti ID aplikasi AdMob (ca-app-pub-xxxxxx~yyyyy) dan ID unit iklan (ca-app-pub-xxxxxxx/yyyyyyyy) dengan ID yang Anda buat di langkah sebelumnya.

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

Gunakan cuplikan kode berikut jika Anda ingin menggunakan ID aplikasi AdMob percobaan dan ID unit iklan percobaan.

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

Sebelum memuat iklan, Anda perlu melakukan inisialisasi Google Mobile Ads SDK. Buka file lib/home_route.dart, dan ubah _initGoogleMobileAds() untuk menginisialisasi SDK sebelum halaman beranda dimuat.

Perhatikan bahwa Anda perlu mengubah jenis nilai yang ditampilkan dari metode _initGoogleMobileAds() dari Future<dynamic> menjadi Future<InitializationStatus> untuk mendapatkan hasil inisialisasi SDK setelah proses selesai.

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. Menambahkan iklan banner

Di bagian ini, Anda menampilkan iklan banner di bagian atas layar game, seperti yang ditunjukkan pada screenshot berikut.

276b4cfa283ea6c7.png

  1. Buka file lib/game_route.dart, dan impor ad_manager.dart
  2. Impor ad_helper.dart dan google_mobile_ads.dart dengan menambahkan baris berikut:

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. Di kelas _GameRouteState, tambahkan anggota berikut untuk iklan banner.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. Dalam metode initState() ini, buat dan muat BannerAd untuk banner berukuran 320x50 (AdSize.banner). Perhatikan bahwa pemroses peristiwa dikonfigurasi untuk mengupdate UI (setState()) saat iklan dimuat.

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. Ubah metode build() untuk menampilkan iklan banner bila tersedia.

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. Rilis sumber daya yang terkait dengan objek BannerAd dengan memanggil metode BannerAd.dispose() di metode callback dispose().

lib/game_route.dart

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

  ...

  super.dispose();
}

Selesai! Jalankan proyek, dan mulai game baru. Setelah iklan dimuat, Anda akan melihat iklan banner di bagian atas layar.

276b4cfa283ea6c7.png

8. Menambahkan iklan interstisial

Di bagian ini, Anda menampilkan iklan interstisial setelah game (total 5 level) selesai.

  1. Buka file lib/game_route.dart
  2. Di kelas _GameRouteState, tambahkan anggota dan metode berikut untuk iklan interstisial.

Perhatikan bahwa pemroses peristiwa iklan dikonfigurasi untuk memeriksa apakah iklan sudah siap (onAdLoaded() dan onAdFailedToLoad()) dan untuk menampilkan layar beranda aplikasi saat iklan ditutup (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. Dalam codelab ini, iklan interstisial ditampilkan setelah pengguna menyelesaikan 5 level. Untuk meminimalkan permintaan iklan yang tidak perlu, minta iklan saat pengguna mencapai level 3.

Dalam metode onNewLevel(), tambahkan baris berikut.

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. Saat game selesai, dialog skor game akan ditampilkan. Saat pengguna menutup dialog, pengguna akan diarahkan ke layar utama Awesome Drawing Quiz.

Karena iklan interstisial harus ditampilkan di antara transisi layar, kami menampilkan iklan interstisial saat pengguna mengklik tombol TUTUP.

Ubah metode onGameOver() sebagai berikut.

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. Rilis sumber daya yang terkait dengan objek InterstitialAd dengan memanggil metode InterstitialAd.dispose() di metode callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Selesai! Jalankan proyek, dan selesaikan game. Jika iklan interstisial dimuat, Anda akan melihat iklan interstisial setelah mengklik tombol TUTUP dari dialog skor.

c546e438c405e941.gif

9. Menambahkan iklan reward

Di bagian ini, Anda menambahkan iklan reward yang memberikan petunjuk tambahan kepada pengguna sebagai reward.

  1. Buka file lib/game_route.dart
  2. Di kelas _GameRouteState, tambahkan anggota untuk iklan reward, dan terapkan metode _loadRewardedAd(). Perhatikan bahwa akan ada iklan reward lain saat iklan ditutup (onAdDismissedFullScreenContent) untuk melakukan cache pada iklan sedini mungkin.

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. Panggilan _loadRewardedAd() dari metode initState() untuk meminta iklan reward saat game dimulai.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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

  ...
}
  1. Izinkan pengguna menonton iklan reward dengan mengklik tombol tindakan mengambang. Tombol hanya muncul jika pengguna belum menggunakan petunjuk di level saat ini dan iklan reward akan dimuat.

Ubah metode _buildFloatingActionButton(), sebagai berikut, untuk menampilkan tombol aksi mengambang. Perhatikan bahwa mengembalikan null menyembunyikan tombol dari layar.

Perhatikan bahwa onUserEarnedReward ini merupakan peristiwa iklan penting dalam iklan reward. Ini dipicu saat pengguna memenuhi syarat untuk menerima hadiah (misalnya, selesai menonton video).

Dalam codelab ini, metide QuizManager.instance.useHint() dipanggil dari callback, yang menampilkan satu karakter lagi dalam string petunjuk. Aplikasi memuat ulang iklan reward di callback onAdClosed untuk memastikan iklan siap sedini mungkin.

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. Rilis sumber daya yang terkait dengan objek RewardedAd dengan memanggil metode RewardedAd.dispose() di metode callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Selesai! Jalankan proyek, dan mainkan game. Setelah iklan reward dimuat, Anda akan melihat tombol petunjuk di bagian bawah layar. Klik tombol Petunjuk untuk mendapatkan petunjuk tambahan.

4a114d243ae3e71d.gif

10. Selesai.

Anda telah menyelesaikan codelab. Anda telah menemukan kode lengkap untuk codelab ini di folder android_studio_folder.pngcomplete.

Untuk mempelajari cara menerapkan iklan inline banner dan native, lihat codelab Menambahkan banner AdMob dan iklan inline native ke aplikasi Flutter.

Untuk mempelajari lebih lanjut, coba codelab Flutter lain.