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

1. Giriş

Bu codelab'de, bir Flutter uygulamasında AdMob banner'ı ve AdMob satır içi doğal reklamı uygulayacaksınız.

Ne oluşturacaksınız?

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

Bu codelab'i uygularken herhangi bir sorunla (kod hataları, dilbilgisi hataları, net olmayan ifadeler vb.) karşılaşırsanız 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 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-inline-ads-in-flutter-main adlı bir klasörünüz olur.

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 starter: Bu codelab'de oluşturacağınız başlangıç kodu.
  • android_studio_folder.png complete: Bu codelab'in tamamlanmış kodu. (Yerel kod için Java ve Objective-C)
  • android_studio_folder.png complete_kotlin_swift: Bu codelab'in tamamlanmış kodu. (Yerel kod için Kotlin ve Swift)

3. AdMob uygulamasını ve reklam birimlerini oluşturma

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

d51828db0e2e4f6c.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 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 Doğal gelişmiş'ı 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 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 AdMob inline ads girin ve platform olarak iOS'i seçin.

a4c963c9aa09519.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 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 Doğal gelişmiş'ı 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 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

Yerel biçim

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

Yerel biçim

ca-app-pub-3940256099942544/3986624511

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

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

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

Test AdMob uygulama kimliğini ve test reklam birimi kimliklerini kullanmak 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ı ilk kullanıma hazırlama

Reklamları yüklemeden önce Google Mobile Ads SDK'sını başlatmanı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.

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_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 ekleme

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

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 öğelerini 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ına banner reklam için aşağıdaki üyeleri ve yöntemleri ekleyin.

_kAdIndex simgesinin, 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 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.

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,, reklam yüklendiğinde reklam dizininde (_kAdIndex) banner reklam oluşturmak için itemBuilder, değerini güncelleyin.
  3. İçerik öğesinin dizinini almak için kodu _getDestinationItemIndex() yöntemini kullanacak şekilde 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. BannerAd nesnesiyle ilişkili kaynağı, dispose() geri çağırma yönteminde BannerAd.dispose() yöntemini çağırarak 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 sayfadaki Banner satır içi reklam düğmesini tıklayın. Bir reklam yüklendikten sonra listenin ortasında bir banner reklam görürsünüz.

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österirsiniz.

f1671b0fa349ccf8.png

Yerel reklamlar, platforma özgü kullanıcı arayüzü bileşenleri (ör. 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. Bu nedenle, her platform için bir NativeAdFactory uygulamanız gerekir. Bu, bir doğal reklam nesnesinden (Android'de NativeAd ve iOS'te GADNativeAd) platforma özgü bir doğal reklam görünümü (Android'de NativeAdView ve iOS'te GADNativeAdView) oluşturmak için kullanılır.

Android (Java) için NativeAdFactory'yi uygulama

  1. android/build.gradle dosyasını (veya android klasöründeki herhangi bir dosyayı) açın ve bir Android projesini 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 New Window'u (Yeni Pencere) tıklayın.

d188bb51cf7c2d08.png

Doğal reklam düzeni oluşturma

  1. Android projesi açıkken Android Studio'daki proje bölmesinde app klasörünü sağ tıklayın ve bağlam menüsünden Yeni > Android Kaynak Dosyası'nı seçin.

2b629ee277a68fd7.png

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

575f126dd018bc0.png

  1. Reklam düzenini aşağıdaki şekilde uygulayın. Düzenin, hedeflenen platformun kullanıcı deneyiminin görsel tasarımıyla eşleşmesi 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>

TileListNativeAdFactory sınıfını oluşturun

  1. Proje bölmesinde com.codelab.flutter.admobinlineads paketini sağ tıklayın ve New > Java Class'ı (Yeni > Java Sınıfı) seçin.

9f3f111dd207a9b4.png

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

47ff82d92676e26.png

  1. Yeni Sınıf iletişim kutusu göründükten sonra her yeri boş bırakıp Tamam'ı tıklayın.

ListTileNativeAdFactory sınıfının com.codelab.flutter.admobinlineads paketinde oluşturulduğunu görürsünüz.

e4ed232c358ffb19.png

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

Fabrika sınıfı, doğal reklam oluşturmak için bir görünüm nesnesi oluşturmaktan sorumludur. Kodu incelediğinizde, fabrika sınıfının bir UnifiedNativeAdView oluşturup NativeAd nesnesiyle doldurduğunu görebilirsiniz.

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

TileListNativeAdFactory sınıfını kaydedin

NativeAdFactory örneğinin Flutter tarafında kullanılabilmesi için GoogleMobileAdsPlugin'ye kaydedilmesi gerekir.

  1. MainActivity.java dosyasını açın ve configureFlutterEngine() yöntemini ve 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ı silinmelidir. cleanUpFlutterEngine() yönteminde ListTileNativeAdFactory sınıfının kaydını silin.

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 yerel reklamları oluşturmak için ListTileNativeAdFactory sınıfını kullanmaya hazırsınız.

Android (Kotlin) için NativeAdFactory'yi uygulama

  1. android/build.gradle dosyasını (veya android klasöründeki herhangi bir dosyayı) açın ve bir Android projesini 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 New Window'u (Yeni Pencere) tıklayın.

d188bb51cf7c2d08.png

Doğal reklam düzeni oluşturma

  1. Android projesi açıkken Android Studio'daki proje bölmesinde app klasörünü sağ tıklayın ve bağlam menüsünden Yeni > Android Kaynak Dosyası'nı seçin.

2b629ee277a68fd7.png

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

575f126dd018bc0.png

  1. Reklam düzenini aşağıdaki şekilde uygulayın. Düzenin, hedeflenen platformun kullanıcı deneyiminin görsel tasarımıyla eşleşmesi 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>

TileListNativeAdFactory sınıfını oluşturun

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

7311744cb97cad75.png

  1. Ad olarak ListTileNativeAdFactory girin 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örürsünüz.
  2. ListTileNativeAdFactory sınıfını aşağıdaki gibi uygulayın. Sınıfın, GoogleMobileAdsPlugin.NativeAdFactory arayüzündeki createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için bir görünüm nesnesi oluşturmaktan sorumludur. Kodu incelediğinizde, fabrika sınıfının bir NativeAdView oluşturup NativeAd nesnesiyle doldurduğunu görebilirsiniz.

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

TileListNativeAdFactory sınıfını kaydedin

NativeAdFactory örneğinin Flutter tarafında kullanılabilmesi için GoogleMobileAdsPlugin'ye kaydedilmesi gerekir.

  1. MainActivity.kt dosyasını açın ve configureFlutterEngine() yöntemini ve 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ı silinmelidir. cleanUpFlutterEngine() yönteminde ListTileNativeAdFactory sınıfının kaydını silin.

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 yerel reklamları oluşturmak için ListTileNativeAdFactory sınıfını kullanmaya hazırsınız.

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

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

62aa12c10e6d671f.png

Doğal reklam düzeni hazırlama

Doğal reklam öğelerini yerleştirmek için özel bir görünümünüz (*.xib) olmalıdır. Bu codelab'de, çabalarınızı en aza indirmek için önceden yapılandırılmış görünüm kullanılır.

iOS projesi Xcode'da açıkken ListTileNativeAdView.xib dosyasının Runner projesinde bulunduğunu doğrulayın.

a5f04a32f1868d4f.png

TileListNativeAdFactory sınıfını oluşturun

  1. Proje gezgininde Runner grubunu sağ tıklayın ve yeni sınıf için bir üst dosya oluşturmak üzere New File'ı (Yeni Dosya) 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. Runner grubundan New File'ı (Yeni Dosya) seçerek bir Objective-C dosyası oluşturun.
  2. Sonraki iletişim kutusunda Dosya alanına ListTileNativeAdFactory girin ve dosya türü olarak Boş Dosya'yı seçin.

2c9c998c48db3a0.png

  1. Sonraki'yi tıkladıktan sonra yeni dosyanın oluşturulacağı klasörü seçmeniz istenir. Her şeyi olduğu gibi bırakıp 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ündeki createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için bir görünüm nesnesi oluşturmaktan sorumludur. Kodu incelediğinizde, fabrika sınıfının bir GADNativeAdView oluşturup GADNativeAd nesnesiyle doldurduğunu görebilirsiniz.

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

TileListNativeAdFacotry sınıfını kaydedin

FLTNativeAdFactory uygulamalarının Flutter tarafında kullanılabilmesi için FLTGoogleMobileAdsPlugin'ye kaydedilmesi gerekir.

AppDelegate.m dosyasını açın ve [FLTGoogleMobileAdsPlugin registerNativeAdFactory] yöntemini çağırarak ListTileNativeAdFactory öğesini 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 kullanmaya hazırsınız.

iOS (Swift) için NativeAdFactory'yi uygulama

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

62aa12c10e6d671f.png

Doğal reklam düzeni hazırlama

Doğal reklam öğelerini yerleştirmek için özel bir görünümünüz (*.xib) olmalıdır. Bu codelab'de, çabalarınızı en aza indirmek için önceden yapılandırılmış görünüm kullanılır.

iOS projesi Xcode'da açıkken ListTileNativeAdView.xib dosyasının Runner projesinde bulunduğunu doğrulayın.

a5f04a32f1868d4f.png

TileListNativeAdFactory sınıfını oluşturun

  1. Proje gezgininde Runner grubunu sağ tıklayın ve yeni sınıf için bir üst dosya oluşturmak üzere New File'ı (Yeni Dosya) seçin.

9115c92543345ef1.png

  1. Şablon iletişim kutusunda Swift Dosyası'nı seçin ve dosyayı 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ündeki createNativeAd() yöntemini uyguladığını unutmayın.

Fabrika sınıfı, doğal reklam oluşturmak için bir görünüm nesnesi oluşturmaktan sorumludur. Kodu incelediğinizde, fabrika sınıfının bir GADNativeAdView oluşturup GADNativeAd nesnesiyle doldurduğunu görebilirsiniz.

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

TileListNativeAdFacotry sınıfını kaydedin

FLTNativeAdFactory uygulamalarının Flutter tarafında kullanılabilmesi için FLTGoogleMobileAdsPlugin'ye kaydedilmesi gerekir.

AppDelegate.m dosyasını açın ve FLTGoogleMobileAdsPlugin.registerNativeAdFactory() yöntemini çağırarak ListTileNativeAdFactory öğesini 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 kullanmaya hazırsınız.

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

  1. lib/native_inline_page.dart dosyasını açın. Ardından, aşağıdaki satırları ekleyerek ad_helper.dart ve google_mobile_ads.dart öğelerini 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ına, doğal reklam için aşağıdaki üyeleri ve yöntemleri ekleyin.

_kAdIndex simgesinin, 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, doğal reklam görünümü oluşturmak için ListTileNativeAdFactory kullanan bir NativeAd oluşturup yükleyin.

Fabrikayı eklentiye kaydetmek için kullanılan 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, değerini, reklam yüklendiğinde reklam dizininde (_kAdIndex) banner reklam oluşturmak için itemBuilder, değerini güncelleyin.
  3. İçerik öğesinin dizinini almak için kodu _getDestinationItemIndex() yöntemini kullanacak şekilde 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 sayfadaki Satır içi yerel reklam düğmesini tıklayın. Bir reklam yüklendikten sonra listenin ortasında bir doğal reklam görürsünüz.

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. İşlem tamamlandı

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