Flutter uygulamasına AdMob reklamları ekleme

1. Giriş

Oluşturacaklarınız

Bu codelab'de, oyuncuların çizimin adını tahmin etmelerine olanak tanıyan Awesome Drawing Quiz adlı uygulamaya banner, geçiş reklamı ve ödüllü reklam eklenebilir.

Bu codelab'de çalışırken herhangi bir sorunla (kod hataları, dil bilgisi 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 Mobil Reklamlar AdMob eklentisini yapılandırma
  • Flutter uygulamasında banner, geçiş reklamı ve ödüllü reklam uygulama

Gerekenler

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

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

Acemi Orta Yeterli

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

Acemi Orta Yeterli

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

Bu laboratuvarı tamamlamak için iki yazılıma ihtiyacınız vardır: Flutter SDK'sı ve düzenleyici.

Codelab'i aşağıdaki cihazlardan 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üklenmesini gerektirir).
  • Android Emülatör (Android Studio'da kurulum gerektirir).
  • Tarayıcı (hata ayıklama için Chrome gereklidir).
  • Windows, Linux veya macOS masaüstü uygulaması olarak Uygulamayı dağıtmayı planladığınız platformda gerçekleştirmeniz gerekir. Bu nedenle, bir Windows masaüstü uygulaması geliştirmek istiyorsanız uygun derleme zincirine erişmek için Windows'da geliştirme yapmanız gerekir. İşletim sistemine özgü gereksinimler docs.flutter.dev/desktop sayfasında ayrıntılı olarak açıklanmıştır.

Kodu indirme

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

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 derleyeceğiniz başlangıç kodu.
  • android_studio_folder.pngcomplete — Bu codelab için tamamlanmış kod.

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ı? sorusunu gördüğünüzde HAYIR'ı tıklayın.
  3. Uygulama adı alanına Awesome Drawing Quiz yazın ve platform olarak Android'i seçin.

ddafee37a6f92229.png

  1. Bu codelab'i tamamlamak için kullanıcı metriklerinin etkinleştirilmesi gerekmez. Ancak, kullanıcı davranışını daha ayrıntılı bir şekilde anlamanıza olanak sağladığı 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 Harika Çizim Testi'ni 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 değeri değiştirmeyin.
  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 uygulaması kimliği/reklam birimi kimliği tablolarında listelenen test uygulaması kimliğini ve reklam birimi kimliklerini kullanın.

iOS için 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ı? sorusunu gördüğünüzde HAYIR'ı tıklayın.
  3. Uygulama adı alanına Awesome Drawing Quiz yazın ve platform olarak iOS'i seçin.

93e7f9f114232402.png

  1. Bu codelab'i tamamlamak için kullanıcı metriklerinin etkinleştirilmesi gerekmez. Ancak, kullanıcı davranışını daha ayrıntılı bir şekilde anlamanıza olanak sağladığı 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 değeri değiştirmeyin.
  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

Kendi başınıza yeni bir uygulama ve reklam birimleri oluşturmak yerine codelab'i izlemek isterseniz aşağıdaki tablolarda listelenen test AdMob uygulama kimliği 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 belgelerine bakın.

4. Google Mobile Ads Flutter eklentisini ekleme

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

google_mobile_ads eklentisi; AdMob API'si kullanılarak banner, geçiş reklamı, ödüllü ve yerel reklamların yüklenmesini ve gösterilmesini destekler.

Flutter çok platformlu bir SDK olduğundan google_mobile_ads eklentisi hem iOS hem de Android'de kullanılabilir. Dolayısıyla, eklentiyi Flutter uygulamanıza eklerseniz, eklenti AdMob satır içi reklamlar uygulamasının hem Android hem de iOS sürümleri tarafından kullanılır.

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

AdMob API'lerine AdMob satır içi reklamları projesinden erişmek için, projenin kök dizininde bulunan pubspec.yaml dosyasına bağımlılık olarak google_mobile_ads 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üncelleme (Android)

  1. android/app/src/main/AndroidManifest.xml dosyasını Android Studio'da açın.
  2. com.google.android.gms.ads.APPLICATION_ID adında bir <meta-data> etiketi ekleyerek AdMob uygulama kimliğinizi ekleyin. Örneğin, AdMob uygulama kimliğiniz ca-app-pub-3940256099942544~3347511713 ise aşağıdaki satırları AndroidManifest.xml dosyasına 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'i güncelleme (iOS)

  1. ios/Runner/Info.plist dosyasını Android Studio'da 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 aşağıdaki satırları Info.plist dosyasına 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 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');
    }
  }
}

AdMob uygulama kimliğini test etmek ve reklam birimi kimliklerini test etmek 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ı başlatma

Reklamları yüklemeden önce, Google Mobile Ads SDK'sını ilk kullanıma hazırlamanı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.

İşlem tamamlandıktan sonra SDK başlatma sonucunu almak için _initGoogleMobileAds() yönteminin Future<dynamic> olan döndürme türünü Future<InitializationStatus> olarak değiştirmeniz gerektiğini unutmayın.

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 ekleyin

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örüntülüyorsunuz.

276b4cfa283ea6c7.png

  1. lib/game_route.dart dosyasını açıp ad_manager.dart dosyasını içe aktarın
  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ında, bir 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 (AdSize.banner) için bir BannerAd oluşturup yükleyin. Bir reklam etkinliği işleyicinin, reklam yüklendiğinde kullanıcı arayüzünü (setState()) güncelleyecek şekilde 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. dispose() geri çağırma yönteminde BannerAd.dispose() yöntemini çağırarak BannerAd nesnesiyle ilişkili kaynağı serbest bırakın.

lib/game_route.dart

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

  ...

  super.dispose();
}

İşte bu kadar. Projeyi yürütüp yeni bir oyuna başlayın. Reklam yüklendikten sonra, ekranın üst kısmında bir banner reklam gösterilir.

276b4cfa283ea6c7.png

8. Geçiş reklamı ekleme

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

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

Bir reklam etkinliği işleyicinin, 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()) 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 geçiş reklamı, kullanıcı 5 seviyeyi tamamladıktan sonra gösteriliyor. Gereksiz reklam isteklerini en aza indirmek için, kullanıcılar 3. seviyeye ulaştığında reklam isteyin.

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. Oyun tamamlandığında, maç skoru iletişim kutusu görüntülenir. Kullanıcı iletişim kutusunu kapattığında, kullanıcıyı Harika Çizim Testi'nin ana ekranına yönlendirir.

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

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

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

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

c546e438c405e941.gif

9. Ödüllü reklam ekleyin

Bu bölümde kullanıcıya ödül olarak ek ipucu sağlayan bir ödüllü reklam ekleyeceksiniz.

  1. lib/game_route.dart dosyasını aç
  2. _GameRouteState sınıfında, ödüllü reklam için üyeler ekleyin ve _loadRewardedAd() yöntemini uygulayın. Reklamı mümkün olduğunca erken önbelleğe almak için reklam kapatıldığında başka bir ödüllü reklam (onAdDismissedFullScreenContent) yüklediğ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 initState() yönteminden _loadRewardedAd() 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ı geçerli düzeyde bir ipucu kullanmadıysa ve ödüllü reklam yüklenirse gösterilir.

Kayan işlem düğmesini görüntülemek için _buildFloatingActionButton() yöntemini aşağıdaki gibi değiştirin. null döndürüldüğünde düğme ekranda gizlenir.

onUserEarnedReward değerinin ödüllü reklamdaki en önemli reklam etkinliği olduğunu unutmayın. Kullanıcı ödül kazanmaya uygun hale geldiğinde (ör. bir videoyu izlemeyi bitirdiğinde) tetiklenir.

Bu codelab'de QuizManager.instance.useHint() yöntemi, ipucu dizesinde bir karakteri daha ortaya çıkaran geri çağırma yönteminden çağrılıyor. Uygulama, reklamın mümkün olan en kısa sürede hazır olmasını sağlamak için onAdClosed geri çağırmasında ö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. dispose() geri çağırma yönteminde RewardedAd.dispose() yöntemini çağırarak RewardedAd nesnesiyle ilişkili kaynağı serbest bırakın.

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

İşte bu kadar. Projeyi yürütü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. Hepsi bu kadar.

Codelab'i tamamladınız. Bu codelab için tamamlanmış kodu android_studio_folder.pngcomplete klasöründe bulabilirsiniz.

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

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