Flutter uygulamasına AdMob reklamları ekleme

1. Giriş

Ne oluşturacaksınız?

Bu codelab'de, oyuncuların çizimin adını tahmin etmesine olanak tanıyan Awesome Drawing Quiz adlı bir uygulamaya banner, geçiş reklamı ve ödüllü reklam ekleme konusunda size yol gösterilir.

Bu codelab'i uygularken herhangi bir sorunla (kod hataları, dilbilgisi hataları, net olmayan ifadeler) karşılaşırsanız lütfen codelab'in sol alt köşesindeki Hata bildir bağlantısını tıklayarak sorunu bildirin.

Neler öğreneceksiniz?

  • Google Mobile Ads AdMob eklentisini yapılandırma
  • Flutter uygulamasında banner, geçiş reklamı ve ödüllü reklam uygulama

Gerekenler

  • Android Studio 4.1 veya sonraki bir sürüm
  • Xcode 12 veya sonraki sürümler (iOS geliştirme için)

AdMob ile ilgili deneyim düzeyinizi nasıl değerlendirirsiniz?

Yeni Başlayan Orta Düzey Uzman

Flutter ile ilgili deneyim seviyenizi nasıl değerlendirirsiniz?

Başlangıç Orta İleri

2. Flutter geliştirme ortamınızı kurma

Bu laboratuvarı tamamlamak için iki yazılım gerekir: Flutter SDK ve bir düzenleyici.

Codelab'i aşağıdaki cihazlardan herhangi birini kullanarak çalıştırabilirsiniz:

  • Bilgisayarınıza bağlı ve Geliştirici moduna ayarlanmış fiziksel bir Android veya iOS cihaz.
  • iOS simülatörü (Xcode araçlarının yüklenmesi gerekir).
  • Android Emulator (Android Studio'da kurulum gerektirir).
  • Tarayıcı (hata ayıklama için Chrome gereklidir).
  • Windows, Linux veya macOS masaüstü uygulaması olarak. Dağıtmayı planladığınız platformda geliştirme yapmanız gerekir. Bu nedenle, bir Windows masaüstü uygulaması geliştirmek istiyorsanız uygun derleme zincirine erişmek için Windows'ta geliştirme yapmanız gerekir. docs.flutter.dev/desktop adresinde ayrıntılı olarak ele alınan işletim sistemine özgü gereksinimler vardır.

Kodu indirme

ZIP dosyasını indirdikten sonra içeriğini ayıklayın. admob-ads-in-flutter-master adlı bir klasörünüz olur.

Alternatif olarak, GitHub deposunu komut satırından klonlayabilirsiniz:

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

Depoda iki klasör bulunur:

  • android_studio_folder.pngstarter: Bu codelab'de oluşturacağınız başlangıç kodu.
  • android_studio_folder.pngcomplete: Bu codelab'in tamamlanmış kodu.

3. AdMob uygulamasını ve reklam birimlerini ayarlama

Flutter, çok platformlu bir SDK olduğundan AdMob'da hem Android hem de iOS için uygulama ve reklam birimleri eklemeniz gerekir.

Android için kurulum

Android için kurulum yapmak üzere bir Android uygulaması eklemeniz ve reklam birimleri oluşturmanız gerekir.

Android uygulaması ekleme

  1. AdMob konsolunda, Uygulamalar menüsünden UYGULAMA EKLE'yi tıklayın.
  2. Uygulamanızı Google Play veya App Store'da yayınladınız mı? sorusu sorulduğunda HAYIR'ı tıklayın.
  3. Uygulama adı alanına Awesome Drawing Quiz girin ve platform olarak Android'i seçin.

ddafee37a6f92229.png

  1. Bu codelab'i tamamlamak için kullanıcı metriklerini etkinleştirmeniz gerekmez. Ancak kullanıcı davranışını daha ayrıntılı bir şekilde anlamanıza olanak tanıdığı için bunu yapmanızı öneririz. İşlemi tamamlamak için EKLE'yi tıklayın.

b918bf44362813a9.png

Reklam birimleri oluşturma

AdMob'a reklam birimleri eklemeye başlamak için:

  1. AdMob konsolundaki Uygulamalar menüsünden Awesome Drawing Quiz'i seçin.
  2. Reklam birimleri menüsünü tıklayın.

Banner

  1. REKLAM BİRİMİ EKLE düğmesini tıklayın.
  2. Biçim olarak Banner'ı seçin.
  3. Reklam birimi adı alanına android-adq-banner girin.
  4. İşlemi tamamlamak için REKLAM BİRİMİ OLUŞTUR'u tıklayın.

Geçiş reklamı

  1. REKLAM BİRİMİ EKLE düğmesini tıklayın.
  2. Biçim olarak Geçiş reklamı'nı seçin.
  3. Reklam birimi adı alanına android-adq-interstitial girin.
  4. İşlemi tamamlamak için REKLAM BİRİMİ OLUŞTUR'u tıklayın.

Ödüllü

  1. REKLAM BİRİMİ EKLE düğmesini tıklayın.
  2. Biçim olarak Ödüllü'yü seçin.
  3. Reklam birimi adı alanına android-adq-rewarded girin.
  4. Ödül ayarları için varsayılanı kullanın.
  5. İşlemi tamamlamak için REKLAM BİRİMİ OLUŞTUR'u tıklayın.

Yeni bir reklam biriminin reklam yayınlayabilmesi genellikle birkaç saat sürer.

Reklamın davranışını hemen test etmek istiyorsanız Android uygulama kimliği/reklam birimi kimliği ve iOS uygulama kimliği/reklam birimi kimliği tablolarında listelenen test uygulama kimliğini ve reklam birimi kimliklerini kullanın.

iOS'te kurulum

iOS için kurulum yapmak üzere bir iOS uygulaması eklemeniz ve reklam birimleri oluşturmanız gerekir.

iOS uygulaması ekleme

  1. AdMob konsolunda, Uygulamalar menüsünden UYGULAMA EKLE'yi tıklayın.
  2. Uygulamanızı Google Play veya App Store'da yayınladınız mı? sorusu sorulduğunda HAYIR'ı tıklayın.
  3. Uygulama adı alanına Awesome Drawing Quiz girin ve platform olarak iOS'i seçin.

93e7f9f114232402.png

  1. Bu codelab'i tamamlamak için kullanıcı metriklerini etkinleştirmeniz gerekmez. Ancak kullanıcı davranışını daha ayrıntılı bir şekilde anlamanıza olanak tanıdığı için bunu yapmanızı öneririz. İşlemi tamamlamak için EKLE'yi tıklayın.

b918bf44362813a9.png

Reklam birimleri oluşturma

Reklam birimi eklemek için:

  1. AdMob konsolundaki Uygulamalar menüsünden Awesome Drawing Quiz uygulamasını seçin.
  2. Reklam birimleri menüsünü tıklayın.

Banner

  1. REKLAM BİRİMİ EKLE düğmesini tıklayın.
  2. Biçim olarak Banner'ı seçin.
  3. Reklam birimi adı alanına ios-adq-banner girin.
  4. İşlemi tamamlamak için REKLAM BİRİMİ OLUŞTUR'u tıklayın.

Geçiş reklamı

  1. REKLAM BİRİMİ EKLE düğmesini tıklayın.
  2. Biçim olarak Geçiş reklamı'nı seçin.
  3. Reklam birimi adı alanına ios-adq-interstitial girin.
  4. İşlemi tamamlamak için REKLAM BİRİMİ OLUŞTUR'u tıklayın.

Ödüllü

  1. REKLAM BİRİMİ EKLE düğmesini tıklayın.
  2. Biçim olarak Ödüllü'yü seçin.
  3. Reklam birimi adı alanına ios-adq-rewarded girin.
  4. Ödül ayarları için varsayılanı kullanın.
  5. İşlemi tamamlamak için REKLAM BİRİMİ OLUŞTUR'u tıklayın.

Yeni bir reklam biriminin reklam yayınlayabilmesi genellikle birkaç saat sürer.

Reklamın davranışını hemen test etmek istiyorsanız aşağıdaki tabloda listelenen test uygulama kimliğini ve reklam birimi kimliklerini kullanın.

İsteğe bağlı: Test AdMob uygulamasını ve reklam birimlerini kullanma

Yeni bir uygulama ve reklam birimleri oluşturmak yerine codelab'i takip etmek istiyorsanız aşağıdaki tablolarda listelenen test AdMob uygulama kimliğini ve reklam birimi kimliklerini kullanabilirsiniz.

Android uygulama kimliği/reklam birimi kimliği

Öğe

Uygulama kimliği/reklam birimi kimliği

AdMob uygulama kimliği

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Geçiş reklamı

ca-app-pub-3940256099942544/1033173712

Ödüllü

ca-app-pub-3940256099942544/5224354917

iOS uygulama kimliği/reklam birimi kimliği

Öğe

Uygulama kimliği/reklam birimi kimliği

AdMob uygulama kimliği

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Geçiş reklamı

ca-app-pub-3940256099942544/4411468910

Ödüllü

ca-app-pub-3940256099942544/1712485313

Test reklamları hakkında daha fazla bilgi için Android test reklamları ve iOS test reklamları geliştirici belgelerini inceleyin.

4. Google Mobile Ads Flutter eklentisini ekleme

Flutter, platforma özel çok çeşitli hizmetlere erişim sağlamak için eklentileri kullanır. Eklentiler, her platformdaki hizmetlere ve API'lere erişmenizi sağlar.

google_mobile_ads eklentisi, AdMob API'yi kullanarak banner, geçiş reklamı, ödüllü reklam ve yerel reklam yüklemeyi ve göstermeyi destekler.

Flutter, çok platformlu bir SDK olduğundan google_mobile_ads eklentisi hem iOS hem de Android için geçerlidir. Bu nedenle, eklentiyi Flutter uygulamanıza eklerseniz AdMob satır içi reklam uygulaması hem Android hem de iOS sürümlerinde kullanılır.

Google Mobile Ads eklentisini bağımlılık olarak ekleme

AdMob satır içi reklamları projesinden AdMob API'lerine erişmek için projenin kök dizininde bulunan pubspec.yaml dosyasına google_mobile_ads bağımlılığını ekleyin.

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

...

Eklentiyi Awesome Drawing Quiz projesine yüklemek için Pub get'i tıklayın.

9ce73858eedbd8fc.png

AndroidManifest.xml dosyasını güncelleyin (Android)

  1. Android Studio'da android/app/src/main/AndroidManifest.xml dosyasını açın.
  2. <meta-data> adlı bir etiket ekleyerek AdMob uygulama kimliğinizi ekleyin.com.google.android.gms.ads.APPLICATION_ID Örneğin, AdMob uygulama kimliğiniz ca-app-pub-3940256099942544~3347511713 ise AndroidManifest.xml dosyasına aşağıdaki satırları eklemeniz gerekir.

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 dosyasını güncelleme (iOS)

  1. Android Studio'da ios/Runner/Info.plist dosyasını açın.
  2. AdMob uygulama kimliğinizin dize değeriyle bir GADApplicationIdentifier anahtarı ekleyin. Örneğin, AdMob uygulama kimliğiniz ca-app-pub-3940256099942544~1458002511 ise Info.plist dosyasına aşağıdaki satırları eklemeniz gerekir.

ios/Runner/Info.plist

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

5. Reklamlar için yardımcı sınıf ekleme

lib dizini altında ad_helper.dart adlı yeni bir dosya oluşturun. Ardından, Android ve iOS için bir AdMob uygulama kimliği ve reklam birimi kimlikleri sağlayan AdHelper sınıfını uygulayın.

AdMob uygulama kimliğini (ca-app-pub-xxxxxx~yyyyy) ve reklam birimi kimliğini (ca-app-pub-xxxxxxx/yyyyyyyy) önceki adımda oluşturduğunuz kimliklerle değiştirdiğinizden emin olun.

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

Test AdMob uygulama kimliğini ve test reklam birimi kimliklerini kullanmak istiyorsanız aşağıdaki kod snippet'ini kullanın.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw new UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/5224354917";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/1712485313";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

6. Google Mobile Ads SDK'sını ilk kullanıma hazırlama

Reklamları yüklemeden önce Google Mobile Ads SDK'sını başlatmanız gerekir. lib/home_route.dart dosyasını açın ve ana sayfa yüklenmeden önce SDK'yı başlatmak için _initGoogleMobileAds() öğesini değiştirin.

Tamamlandıktan sonra SDK başlatma sonucunu almak için _initGoogleMobileAds() yönteminin dönüş türünü Future<dynamic> olarak değiştirmeniz gerektiğini unutmayın.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. Banner reklam ekleme

Bu bölümde, aşağıdaki ekran görüntüsünde gösterildiği gibi oyun ekranının üst kısmında bir banner reklam gösteriyorsunuz.

276b4cfa283ea6c7.png

  1. lib/game_route.dart dosyasını açın ve ad_manager.dart
  2. Aşağıdaki satırları ekleyerek ad_helper.dart ve google_mobile_ads.dart öğelerini içe aktarın:

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 sınıfına banner reklam için aşağıdaki üyeleri ekleyin.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. initState() yönteminde, 320x50 banner için bir BannerAd oluşturup yükleyin (AdSize.banner). Bir reklam yüklendiğinde kullanıcı arayüzünü (setState()) güncellemek için bir reklam etkinliği işleyicisinin yapılandırıldığını unutmayın .

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. Kullanılabilir olduğunda banner reklam göstermek için build() yöntemini değiştirin.

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 nesnesiyle ilişkili kaynağı, dispose() geri çağırma yönteminde BannerAd.dispose() yöntemini çağırarak serbest bırakın.

lib/game_route.dart

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

  ...

  super.dispose();
}

İşte bu kadar. Projeyi çalıştırın ve yeni bir oyun başlatın. Bir reklam yüklendikten sonra ekranın üst kısmında bir banner reklam görürsünüz.

276b4cfa283ea6c7.png

8. Geçiş reklamı ekleme

Bu bölümde, oyun (toplam 5 seviye) bittikten sonra bir geçiş reklamı gösteriyorsunuz.

  1. lib/game_route.dart dosyasını açın.
  2. _GameRouteState sınıfına, geçiş reklamı için aşağıdaki üyeleri ve yöntemleri ekleyin.

Bir reklam etkinliği işleyicisinin, reklamın hazır olup olmadığını kontrol edecek (onAdLoaded() ve onAdFailedToLoad()) ve reklam kapatıldığında uygulamanın ana ekranını gösterecek (onAdDismissedFullScreenContent()) şekilde yapılandırıldığını unutmayın.

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. Bu codelab'de, kullanıcı 5 seviyeyi tamamladıktan sonra bir geçiş reklamı gösterilir. Gereksiz reklam isteklerini en aza indirmek için kullanıcı 3. seviyeye ulaştığında reklam isteğinde bulunun.

onNewLevel() yönteminde aşağıdaki satırları ekleyin.

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. Bir maç bittiğinde maç skoru iletişim kutusu gösterilir. Kullanıcı iletişim kutusunu kapattığında Awesome Drawing Quiz'in ana ekranına yönlendirilir.

Geçiş reklamları ekran geçişleri arasında gösterilmesi gerektiğinden, kullanıcı KAPAT düğmesini tıkladığında geçiş reklamını gösteririz.

onGameOver() yöntemini aşağıdaki gibi değiştirin.

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 nesnesiyle ilişkili kaynağı, dispose() geri çağırma yönteminde InterstitialAd.dispose() yöntemini çağırarak serbest bırakın.

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

İşte bu kadar. Projeyi çalıştırın ve oyunu tamamlayın. Bir geçiş reklamı yüklendiyse puan iletişim kutusunda KAPAT düğmesini tıkladığınızda bir geçiş reklamı görürsünüz.

c546e438c405e941.gif

9. Ödüllü reklam ekleme

Bu bölümde, kullanıcıya ödül olarak ek ipucu veren bir ödüllü reklam eklersiniz.

  1. lib/game_route.dart dosyasını açın.
  2. _GameRouteState sınıfında ödüllü reklam için üyeler ekleyin ve _loadRewardedAd() yöntemini uygulayın. Reklam kapatıldığında (onAdDismissedFullScreenContent) mümkün olduğunca erken bir zamanda reklamı önbelleğe almak için başka bir ödüllü reklamın yüklendiğini unutmayın.

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. Oyun başladığında ödüllü reklam istemek için _loadRewardedAd() yönteminden initState() yöntemini çağırın.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. Kullanıcıların kayan işlem düğmesini tıklayarak ödüllü reklam izlemesine izin verin. Düğme yalnızca kullanıcı mevcut seviyede ipucu kullanmamışsa ve ödüllü reklam yüklenmişse gösterilir.

Kayan işlem düğmesini görüntülemek için _buildFloatingActionButton() yöntemini aşağıdaki gibi değiştirin. Geri dönme işleminin null düğmesini ekrandan gizlediğini unutmayın.

onUserEarnedReward, ödüllü reklamlardaki en önemli reklam etkinliğidir. Kullanıcı ödül almaya uygun olduğunda (ör. bir videoyu izlemeyi tamamladığında) tetiklenir.

Bu codelab'de, ipucu dizesinde bir karakter daha gösteren QuizManager.instance.useHint() yöntemi geri çağırmadan çağrılır. Uygulama, reklamın mümkün olduğunca erken hazır olmasını sağlamak için onAdClosed geri çağırma işlevinde ödüllü reklamı yeniden yükler.

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 nesnesiyle ilişkili kaynağı, dispose() geri çağırma yönteminde RewardedAd.dispose() yöntemini çağırarak serbest bırakın.

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

İşte bu kadar. Projeyi çalıştırın ve oyunu oynayın. Ödüllü reklam yüklendikten sonra ekranın alt kısmında bir ipucu düğmesi görürsünüz. Ek ipucu almak için İpucu düğmesini tıklayın.

4a114d243ae3e71d.gif

10. İşlem tamamlandı

Codelab'i tamamlamış olmanız gerekir. Bu codelab'in tamamlanmış kodunu android_studio_folder.pngcomplete klasöründe bulabilirsiniz.

Banner ve satır içi yerel reklamları nasıl uygulayacağınızı öğrenmek için Flutter uygulamasına AdMob banner ve satır içi yerel reklamları ekleme codelab'ini inceleyin.

Daha fazla bilgi edinmek için diğer Flutter codelab'lerini deneyin.