Flutter uygulamasına AdMob banner'ı ve yerel satır içi reklamlar ekleme

1. Giriş

Bu codelab'de, bir Flutter uygulamasına AdMob banner'ı ve AdMob yerel satır içi reklamı uygulayacaksınız.

Neler oluşturacaksınız?

Bu codelab, Flutter için Google Mobile Ads eklentisini kullanarak bir Flutter uygulamasına AdMob satır içi banner'ını ve AdMob yerel satır içi reklamlarını uygulama konusunda size yol gösterir.

Bu codelab'de çalışırken herhangi bir sorun yaşarsanız (kod hataları, dil bilgisi hataları, net olmayan ifadeler vb.) codelab'in sol alt köşesindeki Hata bildir bağlantısını kullanarak sorunu bildirin.

Neler öğreneceksiniz?

  • Google Mobile Ads Flutter eklentisini yapılandırma
  • Flutter uygulamasında satır içi banner ve ödüllü reklamlar 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-inline-ads-in-flutter-main adlı bir klasörünüz olacak.

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

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

Depoda üç klasör bulunur:

  • android_studio_folder.png başlangıç: Bu codelab'de derleyeceğiniz başlangıç kodu.
  • android_studio_folder.png tamamlandı: Bu codelab için tamamlanmış kod. (Yerel kod için Java ve Objective-C)
  • android_studio_folder.png complete_kotlin_swift: Bu codelab için tamamlanmış kod. (Yerel kod için Kotlin ve Swift)

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 AdMob inline ads yazın ve platform olarak Android'i seçin.

d51828db0e2e4f6c.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 AdMob satır içi reklamları uygulamasını seçin.
  2. Reklam birimleri menüsünü tıklayın.

Banner

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

Yerel

  1. REKLAM BİRİMİ EKLE'yi tıklayın.
  2. Biçim olarak Yerel gelişmiş'i seçin.
  3. Reklam birimi adı alanına android-inline-native girin.
  4. İş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 AdMob inline ads yazın ve platform olarak iOS'i seçin.

a4c963c9aa09519.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 AdMob satır içi reklamları uygulamasını seçin.
  2. Reklam birimleri menüsünü tıklayın.

Banner

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

Yerel

  1. REKLAM BİRİMİ EKLE'yi tıklayın.
  2. Biçim olarak Yerel gelişmiş'i seçin.
  3. Reklam birimi adı alanına ios-inline-native girin.
  4. İş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 kullanın

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

Yerleşik

ca-app-pub-3940256099942544/2247696110

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

Yerleşik

ca-app-pub-3940256099942544/3986624511

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

...
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

Eklentiyi AdMob satır içi reklamlar projesine yüklemek için Pub get'i tıklayın.

93ef6061e58ebc86.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.

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 nativeAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_NATIVE_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_NATIVE_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.

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';
    }
    throw UnsupportedError("Unsupported platform");
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/2247696110';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/3986624511';
    }
    throw 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_page.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_page.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomePage 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 listenin ortasında bir banner reklam görüntülüyorsunuz.

62c405c962909fd3.png

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

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerInlinePage extends StatefulWidget {
  ...
}
  1. _BannerInlinePageState sınıfında, bir banner reklam için aşağıdaki üyeleri ve yöntemleri ekleyin.

_kAdIndex değerinin, banner reklamın gösterileceği dizini belirttiğini ve _getDestinationItemIndex() yönteminden öğe dizinini hesaplamak için kullanıldığını unutmayın.

banner_inline_page.dart

class _BannerInlinePageState extends State<BannerInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a banner ad instance
  BannerAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  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.

banner_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');
      },
    ),
  ).load();
}
  1. Kullanılabilir olduğunda banner reklam göstermek için build() yöntemini değiştirin.
  2. Banner reklam girişini saymak için itemCount, kodunu ve reklam yüklendiğinde itemBuilder, öğesini, reklam dizininde (_kAdIndex) banner reklam oluşturacak şekilde güncelleyin.
  3. İçerik öğesi için dizin almak üzere _getDestinationItemIndex() yöntemini kullanmak için kodu güncelleyin.

banner_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            width: _ad!.size.width.toDouble(),
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. dispose() geri çağırma yönteminde BannerAd.dispose() yöntemini çağırarak BannerAd nesnesiyle ilişkili kaynağı serbest bırakın.

banner_inline_page.dart

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

  super.dispose();
}

İşte bu kadar. Projeyi çalıştırın ve ana sayfadan Banner satır içi reklam düğmesini tıklayın. Reklam yüklendikten sonra listenin ortasında bir banner reklam gösterilir.

a5f857a850539fe9.png c32af50872514224.png

8. Doğal reklam ekleme

Bu bölümde, aşağıdaki ekran görüntüsünde gösterildiği gibi listenin ortasında bir doğal reklam görüntülüyorsunuz.

f1671b0fa349ccf8.png

Yerel reklamlar, platforma özgü kullanıcı arayüzü bileşenleri (örneğin, Android'de View veya iOS'te UIView) kullanılarak kullanıcılara sunulur.

Ancak, Flutter widget'larını kullanarak doğrudan yerel kullanıcı arayüzü bileşenleri oluşturmak mümkün değildir. Dolayısıyla, her platform için bir yerel reklam nesnesinden (Android'de NativeAd ve iOS'te GADNativeAd) platforma özel yerel reklam görüntüleme (Android'de NativeAdView ve iOS'te GADNativeAdView) oluşturmak için kullanılan bir NativeAdFactory uygulamanız gerekir.

Android (Java) için NativeAdFactory'yi Uygulama

  1. android/build.gradle dosyasını (veya android klasörü altındaki herhangi bir dosyayı) açın ve bir Android projesi açmak için Android Studio'da Düzenleme İçin Aç'ı tıklayın.

623ad3d2282ccbf8.png

  1. Yeni bir proje açmak için pencere seçmeniz istenirse Android projesi üzerinde çalışırken Flutter projesinin açık kalmasını sağlamak için Yeni Pencere'yi tıklayın.

d188bb51cf7c2d08.png

Yerel reklam düzeni oluşturma

  1. Android projesi açıkken Android Studio'daki proje bölmesinden uygulama öğesini sağ tıklayın ve Yeni > Android Kaynak Dosyası'nı seçin.

2b629ee277a68fd7.png

  1. New Resource File (Yeni Kaynak Dosyası) iletişim kutusunda, dosya adı olarak list_tile_native_ad.xml yazın.
  2. Kaynak türü olarak Düzen'i seçin ve kök öğe olarak com.google.android.gms.ads.nativead.NativeAdView değerini girin.
  3. Yeni bir düzen dosyası oluşturmak için Tamam'ı tıklayın.

575f126dd018bc0.png

  1. Reklam düzenini aşağıdaki gibi uygulayın. Düzenin, amaçlanan platformun kullanıcı deneyiminin görsel tasarımına uygun olması gerektiğini unutmayın.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

ListTileNativeAdFactory sınıfını oluşturma

  1. Proje bölmesinde com.codelab.flutter.admobinlineads paketini sağ tıklayın ve Yeni > Java Sınıfı hakkında daha fazla bilgi edinin.

9f3f111dd207a9b4.png

  1. Ad olarak ListTileNativeAdFactory yazın ve listeden Sınıf'ı seçin.

47ff82d92676e26.png

  1. New Class (Yeni Sınıf) iletişim kutusu görününce her şeyi boş bırakın ve OK (Tamam) seçeneğini tıklayın.

ListTileNativeAdFactory sınıfının com.codelab.flutter.admobinlineads paketinde oluşturulduğunu göreceksiniz.

e4ed232c358ffb19.png

  1. ListTileNativeAdFactory sınıfını aşağıdaki gibi uygulayın. Sınıfın, GoogleMobileAdsPlugin.NativeAdFactory arayüzünde createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için görünüm nesnesi oluşturmaktan sorumludur. Koddan görebileceğiniz gibi, fabrika sınıfı bir UnifiedNativeAdView oluşturur ve bunu bir NativeAd nesnesiyle doldurur.

ListTileNativeAdFactory.java

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Map;

import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

class ListTileNativeAdFactory implements GoogleMobileAdsPlugin.NativeAdFactory {

    private final Context context;

    ListTileNativeAdFactory(Context context) {
        this.context = context;
    }

    @Override
    public NativeAdView createNativeAd(
            NativeAd nativeAd, Map<String, Object> customOptions) {
        NativeAdView nativeAdView = (NativeAdView) LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null);

        TextView attributionViewSmall = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_small);
        TextView attributionViewLarge = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_large);

        ImageView iconView = nativeAdView.findViewById(R.id.iv_list_tile_native_ad_icon);
        NativeAd.Image icon = nativeAd.getIcon();
        if (icon != null) {
            attributionViewSmall.setVisibility(View.VISIBLE);
            attributionViewLarge.setVisibility(View.INVISIBLE);
            iconView.setImageDrawable(icon.getDrawable());
        } else {
            attributionViewSmall.setVisibility(View.INVISIBLE);
            attributionViewLarge.setVisibility(View.VISIBLE);
        }
        nativeAdView.setIconView(iconView);

        TextView headlineView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_headline);
        headlineView.setText(nativeAd.getHeadline());
        nativeAdView.setHeadlineView(headlineView);

        TextView bodyView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_body);
        bodyView.setText(nativeAd.getBody());
        bodyView.setVisibility(nativeAd.getBody() != null ? View.VISIBLE : View.INVISIBLE);
        nativeAdView.setBodyView(bodyView);

        nativeAdView.setNativeAd(nativeAd);

        return nativeAdView;
    }
}

ListTileNativeAdFactory sınıfını kaydedin

Bir NativeAdFactory örneği Flutter tarafında kullanılmadan önce GoogleMobileAdsPlugin öğesine kaydedilmelidir.

  1. MainActivity.java dosyasını açın ve configureFlutterEngine() yöntemi ile cleanUpFlutterEngine() yöntemini geçersiz kılın.
  2. ListTileNativeAdFactory sınıfını configureFlutterEngine() yönteminde benzersiz bir dize kimliğiyle (listTile) kaydedin.

MainActivity.Java

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "listTile",
                new ListTileNativeAdFactory(getContext()));
    }

    ...
}
  1. Temizleme işlemi sırasında her NativeAdFactory örneğinin kaydı iptal edilmelidir. cleanUpFlutterEngine() yönteminde ListTileNativeAdFactory sınıfının kaydını iptal edin.

MainActivity.Java

public class MainActivity extends FlutterActivity {

    ...

    @Override
    public void cleanUpFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine);

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile");
    }
}

Artık Android'de doğal reklamlar oluşturmak için ListTileNativeAdFactory sınıfını kullanmaya hazırsınız.

Android için NativeAdFactory'yi (Kotlin) Uygulama

  1. android/build.gradle dosyasını (veya android klasörü altındaki herhangi bir dosyayı) açın ve bir Android projesi açmak için Android Studio'da Düzenleme İçin Aç'ı tıklayın.

623ad3d2282ccbf8.png

  1. Yeni bir proje açmak için pencere seçmeniz istenirse Android projesi üzerinde çalışırken Flutter projesinin açık kalmasını sağlamak için Yeni Pencere'yi tıklayın.

d188bb51cf7c2d08.png

Yerel reklam düzeni oluşturma

  1. Android projesi açıkken Android Studio'daki proje bölmesinden uygulama öğesini sağ tıklayın ve Yeni > Android Kaynak Dosyası'nı seçin.

2b629ee277a68fd7.png

  1. New Resource File (Yeni Kaynak Dosyası) iletişim kutusunda, dosya adı olarak list_tile_native_ad.xml yazın.
  2. Kaynak türü olarak Düzen'i seçin ve kök öğe olarak com.google.android.gms.ads.nativead.NativeAdView değerini girin.
  3. Yeni bir düzen dosyası oluşturmak için Tamam'ı tıklayın.

575f126dd018bc0.png

  1. Reklam düzenini aşağıdaki gibi uygulayın. Düzenin, amaçlanan platformun kullanıcı deneyiminin görsel tasarımına uygun olması gerektiğini unutmayın.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

ListTileNativeAdFactory sınıfını oluşturma

  1. Proje bölmesinde com.codelab.flutter.admobinlineads paketini sağ tıklayın ve Yeni > Kotlin Dosyası/Sınıfı.

7311744cb97cad75.png

  1. Ad olarak ListTileNativeAdFactory yazın ve listeden Sınıf'ı seçin.

25691151b5814867.png

  1. ListTileNativeAdFactory sınıfının com.codelab.flutter.admobinlineads paketinde oluşturulduğunu göreceksiniz.
  2. ListTileNativeAdFactory sınıfını aşağıdaki gibi uygulayın. Sınıfın, GoogleMobileAdsPlugin.NativeAdFactory arayüzünde createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için görünüm nesnesi oluşturmaktan sorumludur. Koddan görebileceğiniz gibi, fabrika sınıfı bir NativeAdView oluşturur ve bunu bir NativeAd nesnesiyle doldurur.

ListTileNativeAdFactory.kt

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin

class ListTileNativeAdFactory(val context: Context) : GoogleMobileAdsPlugin.NativeAdFactory {

    override fun createNativeAd(
            nativeAd: NativeAd,
            customOptions: MutableMap<String, Any>?
    ): NativeAdView {
        val nativeAdView = LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null) as NativeAdView

        with(nativeAdView) {
            val attributionViewSmall =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_small)
            val attributionViewLarge =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_large)

            val iconView = findViewById<ImageView>(R.id.iv_list_tile_native_ad_icon)
            val icon = nativeAd.icon
            if (icon != null) {
                attributionViewSmall.visibility = View.VISIBLE
                attributionViewLarge.visibility = View.INVISIBLE
                iconView.setImageDrawable(icon.drawable)
            } else {
                attributionViewSmall.visibility = View.INVISIBLE
                attributionViewLarge.visibility = View.VISIBLE
            }
            this.iconView = iconView

            val headlineView = findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
            headlineView.text = nativeAd.headline
            this.headlineView = headlineView

            val bodyView = findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
            with(bodyView) {
                text = nativeAd.body
                visibility = if (nativeAd.body.isNotEmpty()) View.VISIBLE else View.INVISIBLE
            }
            this.bodyView = bodyView

            setNativeAd(nativeAd)
        }

        return nativeAdView
    }
}

ListTileNativeAdFactory sınıfını kaydedin

Bir NativeAdFactory örneği Flutter tarafında kullanılmadan önce GoogleMobileAdsPlugin öğesine kaydedilmelidir.

  1. MainActivity.kt dosyasını açın ve configureFlutterEngine() yöntemi ile cleanUpFlutterEngine() yöntemini geçersiz kılın.
  2. ListTileNativeAdFactory sınıfını configureFlutterEngine() yönteminde benzersiz bir dize kimliğiyle (listTile) kaydedin.

MainActivity.kt

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(
                flutterEngine, "listTile", ListTileNativeAdFactory(context))
    }

    ...
}
  1. Temizleme işlemi sırasında her NativeAdFactory örneğinin kaydı iptal edilmelidir. cleanUpFlutterEngine() yönteminde ListTileNativeAdFactory sınıfının kaydını iptal edin.

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile")
    }
}

Artık Android'de doğal reklamlar oluşturmak için ListTileNativeAdFactory sınıfını kullanmaya hazırsınız.

iOS için NativeAdFactory'yi uygulama (Objective-C)

ios/Podfile dosyasını (veya ios klasöründeki herhangi bir dosyayı) açın ve bir iOS projesi açmak için iOS modülünü Xcode'da aç seçeneğini tıklayın.

62aa12c10e6d671f.png

Yerel reklam düzeni hazırlama

Yerel reklam öğelerini düzenlemek için özel bir görünümünüz (*.xib) olması gerekir. Bu codelab'de, çalışmalarınızı en aza indirmek için önceden yapılandırılmış görünüm kullanılacaktır.

iOS projesi Xcode'da açıkken ListTileNativeAdView.xib dosyasının Runner projesinde mevcut olduğunu onaylayın.

a5f04a32f1868d4f.png

ListTileNativeAdFactory sınıfını oluşturma

  1. Proje gezgininden Çalıştırıcı grubunu sağ tıklayın ve yeni sınıf için bir başlık dosyası oluşturmak üzere Yeni Dosya'yı seçin.

6455aab9e9881ca.png

  1. Şablon iletişim kutusunda Başlık Dosyası'nı seçin ve ListTileNativeAdFactory olarak adlandırın.
  2. ListTileNativeAdFactory.h dosyası oluşturulduktan sonra ListNativeAdFactory sınıfını aşağıdaki gibi tanımlayın:

ListTileNativeAdFactory.h

#ifndef ListTileNativeAdFactory_h
#define ListTileNativeAdFactory_h

// TODO: Import FLTGoogleMobileAdsPlugin.h
#import "FLTGoogleMobileAdsPlugin.h"

// TODO: Declare ListTileNativeAdFactory
@interface ListTileNativeAdFactory : NSObject<FLTNativeAdFactory>

@end


#endif /* ListTileNativeAdFactory_h */
  1. Çalıştırıcı grubundan Yeni Dosya'yı seçerek bir Objective-C dosyası oluşturun.
  2. Sonraki iletişim kutusunda, Dosya alanına ListTileNativeAdFactory yazın ve dosya türü olarak Boş Dosya'yı seçin.

2c9c998c48db3a0.png

  1. İleri'yi tıkladıktan sonra yeni dosyanın oluşturulacağı klasörü seçmeniz istenir. Hiçbir şeyi değiştirmeden bırakın ve Oluştur'u tıklayın.

8635ffe502d1f4ab.png

  1. ListTileNativeFactory sınıfını aşağıdaki gibi uygulayın. Sınıfın, FLTNativeAdFactory protokolünde createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için görünüm nesnesi oluşturmaktan sorumludur. Koddan görebileceğiniz gibi, fabrika sınıfı bir GADNativeAdView oluşturur ve bunu bir GADNativeAd nesnesiyle doldurur.

ListTileNativeAdFactory.m

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

// TODO: Implement ListTileNativeAdFactory
@implementation ListTileNativeAdFactory

- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  GADNativeAdView *nativeAdView =
    [[NSBundle mainBundle] loadNibNamed:@"ListTileNativeAdView" owner:nil options:nil].firstObject;

  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  nativeAdView.callToActionView.userInteractionEnabled = NO;

  nativeAdView.nativeAd = nativeAd;

  return nativeAdView;
}

@end

ListTileNativeAdFacotry sınıfını kaydedin

FLTNativeAdFactory uygulaması Flutter tarafından kullanılmadan önce FLTGoogleMobileAdsPlugin öğesine kaydedilmelidir.

AppDelegate.m dosyasını açın ve [FLTGoogleMobileAdsPlugin registerNativeAdFactory] yöntemini çağırarak ListTileNativeAdFactory değerini benzersiz bir dize kimliğiyle (listTile) kaydedin.

AppDelegate.m

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // TODO: Register ListTileNativeAdFactory
  ListTileNativeAdFactory *listTileFactory = [[ListTileNativeAdFactory alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"listTile"
                                  nativeAdFactory:listTileFactory];

  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Artık iOS'te doğal reklamlar oluşturmak için ListTileNativeAdFactory uygulamasını kullanmaya hazırsınız.

iOS için NativeAdFactory'yi Uygulama (Swift)

ios/Podfile dosyasını (veya ios klasöründeki herhangi bir dosyayı) açın ve bir iOS projesi açmak için iOS modülünü Xcode'da aç seçeneğini tıklayın.

62aa12c10e6d671f.png

Yerel reklam düzeni hazırlama

Yerel reklam öğelerini düzenlemek için özel bir görünümünüz (*.xib) olması gerekir. Bu codelab'de, çalışmalarınızı en aza indirmek için önceden yapılandırılmış görünüm kullanılacaktır.

iOS projesi Xcode'da açıkken ListTileNativeAdView.xib dosyasının Runner projesinde mevcut olduğunu onaylayın.

a5f04a32f1868d4f.png

ListTileNativeAdFactory sınıfını oluşturma

  1. Proje gezgininden Çalıştırıcı grubunu sağ tıklayın ve yeni sınıf için bir başlık dosyası oluşturmak üzere Yeni Dosya'yı seçin.

9115c92543345ef1.png

  1. Şablon iletişim kutusunda Swift Dosyası'nı seçin ve ListTileNativeAdFactory olarak adlandırın.
  2. ListTileNativeAdFactory.swift dosyası oluşturulduktan sonra ListNativeAdFactory sınıfını uygulayın.

Sınıfın, FLTNativeAdFactory protokolünde createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için görünüm nesnesi oluşturmaktan sorumludur. Koddan görebileceğiniz gibi, fabrika sınıfı bir GADNativeAdView oluşturur ve bunu bir GADNativeAd nesnesiyle doldurur.

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

    func createNativeAd(_ nativeAd: GADNativeAd,
                        customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
        let nibView = Bundle.main.loadNibNamed("ListTileNativeAdView", owner: nil, options: nil)!.first
        let nativeAdView = nibView as! GADNativeAdView

        (nativeAdView.headlineView as! UILabel).text = nativeAd.headline

        (nativeAdView.bodyView as! UILabel).text = nativeAd.body
        nativeAdView.bodyView!.isHidden = nativeAd.body == nil

        (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
        nativeAdView.iconView!.isHidden = nativeAd.icon == nil

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

ListTileNativeAdFacotry sınıfını kaydedin

FLTNativeAdFactory uygulaması Flutter tarafından kullanılmadan önce FLTGoogleMobileAdsPlugin öğesine kaydedilmelidir.

AppDelegate.m dosyasını açın ve FLTGoogleMobileAdsPlugin.registerNativeAdFactory() yöntemini çağırarak ListTileNativeAdFactory değerini benzersiz bir dize kimliğiyle (listTile) kaydedin.

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Register ListTileNativeAdFactory
    let listTileFactory = ListTileNativeAdFactory()
    FLTGoogleMobileAdsPlugin.registerNativeAdFactory(
        self, factoryId: "listTile", nativeAdFactory: listTileFactory)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Artık iOS'te doğal reklamlar oluşturmak için ListTileNativeAdFactory uygulamasını kullanmaya hazırsınız.

Doğal reklamı Flutter widget'larıyla entegre etme

  1. lib/native_inline_page.dart dosyasını aç. Ardından aşağıdaki satırları ekleyerek ad_helper.dart ve google_mobile_ads.dart verilerini içe aktarın:

native_inline_page.dart

...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class NativeInlinePage extends StatefulWidget {
  ...
}
  1. _NativeInlinePageState sınıfında, doğal reklam için aşağıdaki üyeleri ve yöntemleri ekleyin.

_kAdIndex değerinin, banner reklamın gösterileceği dizini belirttiğini ve _getDestinationItemIndex() yönteminden öğe dizinini hesaplamak için kullanıldığını unutmayın.

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a native ad instance
  NativeAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. initState() yönteminde, yerel reklam görünümü oluşturmak için ListTileNativeAdFactory kullanan bir NativeAd oluşturup yükleyin.

Fabrikayı eklentiye kaydettirmek için kullanılan aynı fabrika kimliğinin (listTile) kullanıldığını unutmayın.

native_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Create a NativeAd instance
  _ad = NativeAd(
    adUnitId: AdHelper.nativeAdUnitId,
    factoryId: 'listTile',
    request: AdRequest(),
    listener: NativeAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as NativeAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');       },
    ),
  );

  _ad.load();
}
  1. Kullanılabilir olduğunda banner reklam göstermek için build() yöntemini değiştirin.
  2. Banner reklam girişini saymak için itemCount, kodunu ve reklam yüklendiğinde reklam dizininde (_kAdIndex) banner reklam oluşturmak için itemBuilder, öğesini güncelleyin.
  3. İçerik öğesi için dizin almak üzere _getDestinationItemIndex() yöntemini kullanmak için kodu güncelleyin.

native_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. dispose() geri çağırma yönteminde NativeAd.dispose() yöntemini çağırarak NativeAd nesnesiyle ilişkili kaynağı serbest bırakın.

native_inline_page.dart

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

  super.dispose();
}

İşte bu kadar. Projeyi çalıştırın ve ana sayfadan Yerel satır içi reklam düğmesini tıklayın. Reklam yüklendikten sonra listenin ortasında bir doğal reklam görürsünüz.

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. Hepsi bu kadar.

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