AdMob-Banner und native Inline-Anzeigen zu einer Flutter-App hinzufügen

1. Einführung

In diesem Codelab implementieren Sie ein AdMob-Banner und eine native AdMob-Inline-Anzeige in einer Flutter-App.

Aufgaben

In diesem Codelab erfahren Sie, wie Sie mit dem Google Mobile Ads-Plug-in für Flutter ein AdMob-Inline-Banner und native AdMob-Inline-Anzeigen in einer Flutter-App implementieren.

Wenn Sie beim Durcharbeiten dieses Codelabs Probleme haben (z. B. Code- oder Grammatikfehler oder unklare Formulierungen), melden Sie sie bitte über den Link Fehler melden links unten im Codelab.

Aufgaben in diesem Lab

  • Flutter-Plug-in für Google Mobile Ads konfigurieren
  • Inline-Banner und Anzeigen mit Prämie in einer Flutter-App implementieren

Voraussetzungen

  • Android Studio 4.1 oder höher
  • Xcode 12 oder höher (für iOS-Entwicklung)

Wie würden Sie Ihre Erfahrung mit AdMob bewerten?

<ph type="x-smartling-placeholder"></ph> Neuling Leicht fortgeschritten Kompetent .

Wie würden Sie Ihre Erfahrung mit Flutter bewerten?

<ph type="x-smartling-placeholder"></ph> Neuling Leicht fortgeschritten Kompetent

2. Flutter-Entwicklungsumgebung einrichten

Für dieses Lab benötigen Sie zwei Softwareprogramme: das Flutter SDK und einen Editor.

Sie können das Codelab auf jedem dieser Geräte ausführen:

  • Ein physisches Android- oder iOS, das mit Ihrem Computer verbunden ist und sich im Entwicklermodus befindet.
  • Den iOS-Simulator (erfordert die Installation von Xcode-Tools).
  • Android-Emulator (Einrichtung in Android Studio erforderlich)
  • Ein Browser (zur Fehlerbehebung wird Chrome benötigt)
  • Als Windows-, Linux- oder macOS-Desktopanwendung Die Entwicklung muss auf der Plattform erfolgen, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie die Entwicklung unter Windows ausführen, damit Sie auf die entsprechende Build-Kette zugreifen können. Es gibt betriebssystemspezifische Anforderungen, die unter docs.flutter.dev/desktop ausführlich beschrieben werden.

Code herunterladen

Extrahieren Sie nach dem Herunterladen der ZIP-Datei den Inhalt. Sie haben einen Ordner mit dem Namen „admob-inline-ads-in-flutter-main“.

Alternativ können Sie das GitHub-Repository über die Befehlszeile klonen:

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

Das Repository enthält drei Ordner:

  • android_studio_folder.png starter:Code wird gestartet, den Sie in diesem Codelab erstellen.
  • android_studio_folder.png abgeschlossen:Code für dieses Codelab wurde ausgefüllt. (Java und Objective-C für nativen Code)
  • android_studio_folder.png complete_kotlin_swift::Code für dieses Codelab abgeschlossen. (Kotlin und Swift für nativen Code)

3. AdMob-App und -Anzeigenblöcke einrichten

Da Flutter ein plattformübergreifendes SDK ist, müssen Sie in AdMob eine App und Anzeigenblöcke für Android und iOS hinzufügen.

Einrichtung für Android

Zur Einrichtung für Android müssen Sie eine Android-App hinzufügen und Anzeigenblöcke erstellen.

Android-App hinzufügen

  1. Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
  2. Wenn die Frage Haben Sie Ihre App bei Google Play oder im App Store veröffentlicht? angezeigt wird, klicken Sie auf Nein.
  3. Geben Sie in das Feld für den App-Namen AdMob inline ads ein und wählen Sie Android als Plattform aus.

d51828db0e2e4f6c.png

  1. Das Aktivieren von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen dies jedoch, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

b918bf44362813a9.png

Anzeigenblöcke erstellen

So fügen Sie Anzeigenblöcke hinzu:

  1. Wählen Sie in der AdMob-Konsole im Menü Apps die Option AdMob-Inline-Anzeigen aus.
  2. Klicken Sie auf das Menü Anzeigenblöcke.

Banner

  1. Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Banner aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-inline-banner ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

Nativ

  1. Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Nativ erweitert aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-inline-native ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

In der Regel dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie die Funktionsweise der Anzeige sofort testen möchten, verwenden Sie die Test-App-ID und die Anzeigenblock-IDs, die in den Tabellen „Android-App-ID/Anzeigenblock-ID“ bzw. „iOS-App-ID/Anzeigenblock-ID“ aufgeführt sind.

Einrichtung für iOS

Für die Einrichtung für iOS müssen Sie eine iOS-App hinzufügen und Anzeigenblöcke erstellen.

iOS-Apps hinzufügen

  1. Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
  2. Wenn die Frage Haben Sie Ihre App bei Google Play oder im App Store veröffentlicht? angezeigt wird, klicken Sie auf Nein.
  3. Geben Sie in das Feld für den App-Namen AdMob inline ads ein und wählen Sie iOS als Plattform aus.

a4c963c9aa09519.png

  1. Das Aktivieren von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen dies jedoch, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

b918bf44362813a9.png

Anzeigenblöcke erstellen

So fügen Sie Anzeigenblöcke hinzu:

  1. Wählen Sie in der AdMob-Konsole im Menü Apps die Option AdMob-Inline-Anzeigen aus.
  2. Klicken Sie auf das Menü Anzeigenblöcke.

Banner

  1. Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Banner aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-inline-banner ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

Nativ

  1. Klicken Sie auf ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Nativ erweitert aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-inline-native ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

In der Regel dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie die Funktionsweise der Anzeige sofort testen möchten, verwenden Sie die Test-App-ID und die Anzeigenblock-IDs, die in der folgenden Tabelle aufgeführt sind.

Optional: AdMob-Test-App und -Anzeigenblöcke verwenden

Wenn Sie das Codelab verwenden möchten, anstatt selbst eine neue Anwendung und Anzeigenblöcke zu erstellen, können Sie die in den folgenden Tabellen aufgeführten Test-IDs für AdMob-Apps und Anzeigenblöcke verwenden.

Android-App-ID/Anzeigenblock-ID

Posten

App-ID/Anzeigenblock-ID

AdMob-App-ID

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Nativ

ca-app-pub-3940256099942544/2247696110

iOS-App-ID/Anzeigenblock-ID

Posten

App-ID/Anzeigenblock-ID

AdMob-App-ID

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Nativ

ca-app-pub-3940256099942544/3986624511

Weitere Informationen zu Testanzeigen finden Sie in der Entwicklerdokumentation zu Android-Testanzeigen und iOS-Testanzeigen.

4. Google Mobile Ads Flutter-Plug-in hinzufügen

Flutter verwendet Plug-ins, um Zugriff auf eine Vielzahl plattformspezifischer Dienste zu bieten. Plug-ins ermöglichen Ihnen den Zugriff auf Dienste und APIs auf jeder Plattform.

Das Plug-in google_mobile_ads unterstützt das Laden und Anzeigen von Banner-, Interstitial- und nativen Anzeigen sowie Anzeigen mit Prämie über die AdMob API.

Da Flutter ein plattformübergreifendes SDK ist, ist das Plug-in „google_mobile_ads“ sowohl für iOS als auch für Android anwendbar. Wenn Sie also das Plug-in zu Ihrer Flutter-App hinzufügen, wird es sowohl von der Android- als auch der iOS-Version der AdMob-App für Inline-Anzeigen verwendet.

Google Mobile Ads-Plug-in als Abhängigkeit hinzufügen

Wenn Sie über das Projekt für AdMob-Inline-Anzeigen auf die AdMob APIs zugreifen möchten, fügen Sie der Datei pubspec.yaml im Stammverzeichnis des Projekts google_mobile_ads als Abhängigkeit hinzu.

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

...

Klicken Sie auf Pub get, um das Plug-in im Projekt AdMob-Inline-Anzeigen zu installieren.

93ef6061e58ebc86.png

AndroidManifest.xml (Android) aktualisieren

  1. Öffnen Sie die Datei android/app/src/main/AndroidManifest.xml in Android Studio.
  2. Fügen Sie Ihre AdMob-App-ID hinzu, indem Sie ein <meta-data>-Tag mit dem Namen com.google.android.gms.ads.APPLICATION_ID einfügen. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~3347511713 lautet, müssen Sie der Datei AndroidManifest.xml die folgenden Zeilen hinzufügen.

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-Datei aktualisieren (iOS)

  1. Öffnen Sie die Datei ios/Runner/Info.plist in Android Studio.
  2. Fügen Sie einen GADApplicationIdentifier-Schlüssel mit dem Stringwert Ihrer AdMob-App-ID hinzu. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~1458002511 lautet, müssen Sie der Datei Info.plist die folgenden Zeilen hinzufügen.

ios/Runner/Info.plist

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

5. Hilfsklasse für Anzeigen hinzufügen

Erstellen Sie eine neue Datei mit dem Namen ad_helper.dart im Verzeichnis lib. Implementieren Sie dann die AdHelper-Klasse, die eine AdMob-App-ID und Anzeigenblock-IDs für Android und iOS bereitstellt.

Ersetzen Sie die AdMob-App-ID (ca-app-pub-xxxxxx~yyyyy) und die Anzeigenblock-ID (ca-app-pub-xxxxxxx/yyyyyyyy) durch die IDs, die Sie im vorherigen Schritt erstellt haben.

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

Verwenden Sie das folgende Code-Snippet, wenn Sie die AdMob-Test-App-ID und die Test-Anzeigenblock-IDs nutzen möchten.

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 initialisieren

Bevor Sie Anzeigen laden, müssen Sie das Google Mobile Ads SDK initialisieren. Öffnen Sie die Datei lib/home_page.dart und ändern Sie _initGoogleMobileAds(), um das SDK zu initialisieren, bevor die Startseite geladen wird.

Sie müssen den Rückgabetyp der Methode _initGoogleMobileAds() von Future<dynamic> in Future<InitializationStatus> ändern, um das Ergebnis der SDK-Initialisierung nach Abschluss zu erhalten.

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. Banneranzeige hinzufügen

In diesem Bereich präsentieren Sie eine Banneranzeige in der Mitte der Liste, wie im folgenden Screenshot dargestellt.

62c405c962909fd3.png

  1. Öffnen Sie die Datei lib/banner_inline_page.dart.
  2. Importieren Sie ad_helper.dart und google_mobile_ads.dart, indem Sie die folgenden Zeilen hinzufügen:
...

// 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. Fügen Sie in der Klasse _BannerInlinePageState die folgenden Mitglieder und Methoden für eine Banneranzeige hinzu.

Beachten Sie, dass _kAdIndex den Index angibt, an dem eine Banneranzeige eingeblendet wird. Er wird verwendet, um den Elementindex aus der _getDestinationItemIndex()-Methode zu berechnen.

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. Erstellen und laden Sie in der Methode initState() ein BannerAd für das 320 x 50-Banner (AdSize.banner). Ein Anzeigenereignis-Listener ist so konfiguriert, dass die Benutzeroberfläche (setState()) beim Laden einer Anzeige aktualisiert wird.

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. Passen Sie die Methode build() so an, dass eine Banneranzeige eingeblendet wird, sofern verfügbar.
  2. Aktualisieren Sie itemCount,, damit ein Banneranzeigeneintrag gezählt wird, und aktualisieren Sie itemBuilder,, damit beim Laden der Anzeige eine Banneranzeige mit dem Anzeigenindex (_kAdIndex) gerendert wird.
  3. Aktualisieren Sie den Code so, dass mit der Methode _getDestinationItemIndex() ein Index für das Inhaltselement abgerufen wird.

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. Geben Sie die mit dem BannerAd-Objekt verknüpfte Ressource frei, indem Sie die Methode BannerAd.dispose() in der Callback-Methode dispose() aufrufen.

banner_inline_page.dart

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

  super.dispose();
}

Fertig! Führen Sie das Projekt aus und klicken Sie auf der Startseite auf die Schaltfläche Banner-Inline-Anzeige. Nachdem eine Anzeige geladen wurde, sehen Sie eine Banneranzeige in der Mitte der Liste.

a5f857a850539fe9.png c32af50872514224.png

8. Native Anzeige hinzufügen

In diesem Bereich präsentieren Sie eine native Anzeige in der Mitte der Liste, wie im folgenden Screenshot zu sehen ist.

f1671b0fa349ccf8.png

Native Anzeigen werden Nutzern mithilfe von UI-Komponenten präsentiert, die in der Plattform nativ sind (z. B. View für Android oder UIView für iOS).

Es ist jedoch nicht möglich, native UI-Komponenten direkt mithilfe von Flutter-Widgets zu erstellen. Daher müssen Sie für jede Plattform eine NativeAdFactory implementieren, die verwendet wird, um eine plattformspezifische native Anzeigenansicht (NativeAdView für Android und GADNativeAdView für iOS) aus einem nativen Anzeigenobjekt (NativeAd für Android und GADNativeAd für iOS) zu erstellen.

NativeAdFactory für Android (Java) implementieren

  1. Öffnen Sie die Datei android/build.gradle (oder eine beliebige Datei im Ordner android) und klicken Sie auf In Android Studio zur Bearbeitung öffnen, um ein Android-Projekt zu öffnen.

623ad3d2282ccbf8.png

  1. Wenn Sie aufgefordert werden, ein Fenster zum Öffnen eines neuen Projekts auszuwählen, klicken Sie auf Neues Fenster, damit das Flutter-Projekt geöffnet bleibt, während Sie an dem Android-Projekt arbeiten.

d188bb51cf7c2d08.png

Layout für native Anzeigen erstellen

  1. Klicken Sie bei geöffnetem Android-Projekt in Android Studio im Projektbereich mit der rechten Maustaste auf App und wählen Sie Neu > Android Resource File aus dem Kontextmenü.

2b629ee277a68fd7.png

  1. Geben Sie im Dialogfeld Neue Ressourcendatei den Dateinamen list_tile_native_ad.xml ein.
  2. Wählen Sie als Ressourcentyp Layout aus und geben Sie com.google.android.gms.ads.nativead.NativeAdView als Stammelement ein.
  3. Klicken Sie auf OK, um eine neue Layoutdatei zu erstellen.

575f126dd018bc0.png

  1. Implementieren Sie das Anzeigenlayout wie folgt. Beachten Sie, dass das Layout dem visuellen Design der User Experience der Plattform entsprechen sollte, für die es vorgesehen ist.

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-Klasse erstellen

  1. Klicken Sie im Bereich „Projekt“ mit der rechten Maustaste auf das Paket com.codelab.flutter.admobinlineads und wählen Sie Neu > Java-Klasse.

9f3f111dd207a9b4.png

  1. Geben Sie ListTileNativeAdFactory als Namen ein und wählen Sie Kurs aus der Liste aus.

47ff82d92676e26.png

  1. Lassen Sie im Dialogfeld New Class (Neue Klasse) alles leer und klicken Sie auf OK.

Sie sehen, dass die Klasse ListTileNativeAdFactory im Paket com.codelab.flutter.admobinlineads erstellt wird.

e4ed232c358ffb19.png

  1. Implementieren Sie die ListTileNativeAdFactory-Klasse wie folgt. Die Klasse implementiert die Methode createNativeAd() in der GoogleMobileAdsPlugin.NativeAdFactory-Schnittstelle.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie dem Code entnehmen können, erstellt die Factory-Klasse ein UnifiedNativeAdView und füllt es mit einem NativeAd-Objekt.

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-Klasse registrieren

Eine NativeAdFactory-Instanz muss unter GoogleMobileAdsPlugin registriert werden, bevor sie von Flutter-Seite verwendet werden kann.

  1. Öffnen Sie die Datei MainActivity.java und überschreiben Sie die Methoden configureFlutterEngine() und cleanUpFlutterEngine().
  2. Registrieren Sie die Klasse ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile) in der Methode configureFlutterEngine().

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. Die Registrierung jeder NativeAdFactory-Instanz sollte während des Bereinigungsvorgangs aufgehoben werden. Heben Sie die Registrierung der Klasse ListTileNativeAdFactory in der Methode cleanUpFlutterEngine() auf.

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

Jetzt können Sie die Klasse ListTileNativeAdFactory verwenden, um native Anzeigen unter Android zu rendern.

NativeAdFactory für Android (Kotlin) implementieren

  1. Öffnen Sie die Datei android/build.gradle (oder eine beliebige Datei im Ordner android) und klicken Sie auf In Android Studio zur Bearbeitung öffnen, um ein Android-Projekt zu öffnen.

623ad3d2282ccbf8.png

  1. Wenn Sie aufgefordert werden, ein Fenster zum Öffnen eines neuen Projekts auszuwählen, klicken Sie auf Neues Fenster, damit das Flutter-Projekt geöffnet bleibt, während Sie an dem Android-Projekt arbeiten.

d188bb51cf7c2d08.png

Layout für native Anzeigen erstellen

  1. Klicken Sie bei geöffnetem Android-Projekt in Android Studio im Projektbereich mit der rechten Maustaste auf App und wählen Sie Neu > Android Resource File aus dem Kontextmenü.

2b629ee277a68fd7.png

  1. Geben Sie im Dialogfeld Neue Ressourcendatei den Dateinamen list_tile_native_ad.xml ein.
  2. Wählen Sie als Ressourcentyp Layout aus und geben Sie com.google.android.gms.ads.nativead.NativeAdView als Stammelement ein.
  3. Klicken Sie auf OK, um eine neue Layoutdatei zu erstellen.

575f126dd018bc0.png

  1. Implementieren Sie das Anzeigenlayout wie folgt. Beachten Sie, dass das Layout dem visuellen Design der User Experience der Plattform entsprechen sollte, für die es vorgesehen ist.

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-Klasse erstellen

  1. Klicken Sie im Bereich „Projekt“ mit der rechten Maustaste auf das Paket com.codelab.flutter.admobinlineads und wählen Sie Neu > Kotlin-Datei/-Klasse

7311744cb97cad75.png

  1. Geben Sie ListTileNativeAdFactory als Namen ein und wählen Sie Kurs aus der Liste aus.

25691151b5814867.png

  1. Sie sehen, dass die Klasse ListTileNativeAdFactory im Paket com.codelab.flutter.admobinlineads erstellt wird.
  2. Implementieren Sie die ListTileNativeAdFactory-Klasse wie folgt. Die Klasse implementiert die Methode createNativeAd() in der GoogleMobileAdsPlugin.NativeAdFactory-Schnittstelle.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie dem Code entnehmen können, erstellt die Factory-Klasse ein NativeAdView und füllt es mit einem NativeAd-Objekt.

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-Klasse registrieren

Eine NativeAdFactory-Instanz muss unter GoogleMobileAdsPlugin registriert werden, bevor sie von Flutter-Seite verwendet werden kann.

  1. Öffnen Sie die Datei MainActivity.kt und überschreiben Sie die Methoden configureFlutterEngine() und cleanUpFlutterEngine().
  2. Registrieren Sie die Klasse ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile) in der Methode configureFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {

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

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

    ...
}
  1. Die Registrierung jeder NativeAdFactory-Instanz sollte während des Bereinigungsvorgangs aufgehoben werden. Heben Sie die Registrierung der Klasse ListTileNativeAdFactory in der Methode cleanUpFlutterEngine() auf.

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

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

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

Jetzt können Sie die Klasse ListTileNativeAdFactory verwenden, um native Anzeigen unter Android zu rendern.

NativeAdFactory für iOS implementieren (Objective-C)

Öffnen Sie die Datei ios/Podfile (oder eine beliebige Datei im Ordner ios) und klicken Sie auf Open iOS module in Xcode (iOS-Modul in Xcode öffnen), um ein iOS-Projekt zu öffnen.

62aa12c10e6d671f.png

Layout für native Anzeigen vorbereiten

Sie benötigen eine benutzerdefinierte Ansicht (*.xib), um das Layout nativer Anzeigen-Assets anzupassen. In diesem Codelab wird die vorkonfigurierte Ansicht verwendet, um Ihren Aufwand zu minimieren.

Öffnen Sie das iOS-Projekt in Xcode und prüfen Sie, ob ListTileNativeAdView.xib im Runner-Projekt vorhanden ist.

a5f04a32f1868d4f.png

ListTileNativeAdFactory-Klasse erstellen

  1. Klicken Sie im Projektnavigator mit der rechten Maustaste auf die Gruppe Runner und wählen Sie New File (Neue Datei) aus, um eine Headerdatei für die neue Klasse zu erstellen.

6455aab9e9881ca.png

  1. Wählen Sie im Dialogfeld „Vorlage“ die Header-Datei aus und nennen Sie sie ListTileNativeAdFactory.
  2. Nachdem die Datei ListTileNativeAdFactory.h erstellt wurde, definieren Sie die Klasse ListNativeAdFactory so:

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. Erstellen Sie eine Objective-C-Datei, indem Sie in der Gruppe Runner die Option New File (Neue Datei) auswählen.
  2. Geben Sie im nächsten Dialogfeld ListTileNativeAdFactory in das Feld Datei ein und wählen Sie als Dateityp Leere Datei aus.

2c9c998c48db3a0.png

  1. Nachdem Sie auf Weiter geklickt haben, werden Sie aufgefordert, einen Ordner auszuwählen, in dem die neue Datei erstellt werden soll. Lassen Sie alles unverändert und klicken Sie auf Erstellen.

8635ffe502d1f4ab.png

  1. Implementieren Sie die ListTileNativeFactory-Klasse wie folgt. Die Klasse implementiert die Methode createNativeAd() im FLTNativeAdFactory-Protokoll.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie dem Code entnehmen können, erstellt die Factory-Klasse ein GADNativeAdView und füllt es mit einem GADNativeAd-Objekt.

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-Klasse registrieren

Eine Implementierung einer FLTNativeAdFactory muss unter FLTGoogleMobileAdsPlugin registriert werden, bevor sie von Flutter-Seite verwendet werden kann.

Öffnen Sie die Datei AppDelegate.m und registrieren Sie die ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile), indem Sie die Methode [FLTGoogleMobileAdsPlugin registerNativeAdFactory] aufrufen.

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

Jetzt können Sie die ListTileNativeAdFactory verwenden, um native Anzeigen unter iOS zu rendern.

NativeAdFactory für iOS (Swift) implementieren

Öffnen Sie die Datei ios/Podfile (oder eine beliebige Datei im Ordner ios) und klicken Sie auf Open iOS module in Xcode (iOS-Modul in Xcode öffnen), um ein iOS-Projekt zu öffnen.

62aa12c10e6d671f.png

Layout für native Anzeigen vorbereiten

Sie benötigen eine benutzerdefinierte Ansicht (*.xib), um das Layout nativer Anzeigen-Assets anzupassen. In diesem Codelab wird die vorkonfigurierte Ansicht verwendet, um Ihren Aufwand zu minimieren.

Öffnen Sie das iOS-Projekt in Xcode und prüfen Sie, ob ListTileNativeAdView.xib im Runner-Projekt vorhanden ist.

a5f04a32f1868d4f.png

ListTileNativeAdFactory-Klasse erstellen

  1. Klicken Sie im Projektnavigator mit der rechten Maustaste auf die Gruppe Runner und wählen Sie New File (Neue Datei) aus, um eine Headerdatei für die neue Klasse zu erstellen.

9115c92543345ef1.png

  1. Wählen Sie im Dialogfeld „Vorlage“ die Swift-Datei aus und nennen Sie sie ListTileNativeAdFactory.
  2. Implementieren Sie nach dem Erstellen der Datei ListTileNativeAdFactory.swift die Klasse ListNativeAdFactory.

Die Klasse implementiert die Methode createNativeAd() im FLTNativeAdFactory-Protokoll.

Die Factory-Klasse ist für das Erstellen eines Ansichtsobjekts zum Rendern einer nativen Anzeige verantwortlich. Wie Sie dem Code entnehmen können, erstellt die Factory-Klasse ein GADNativeAdView und füllt es mit einem GADNativeAd-Objekt.

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-Klasse registrieren

Eine Implementierung einer FLTNativeAdFactory muss unter FLTGoogleMobileAdsPlugin registriert werden, bevor sie von Flutter-Seite verwendet werden kann.

Öffnen Sie die Datei AppDelegate.m und registrieren Sie die ListTileNativeAdFactory mit einer eindeutigen String-ID (listTile), indem Sie die Methode FLTGoogleMobileAdsPlugin.registerNativeAdFactory() aufrufen.

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

Jetzt können Sie die ListTileNativeAdFactory verwenden, um native Anzeigen unter iOS zu rendern.

Native Anzeige in Flutter-Widgets einbinden

  1. Datei „lib/native_inline_page.dart“ öffnen. Importieren Sie dann ad_helper.dart und google_mobile_ads.dart, indem Sie die folgenden Zeilen hinzufügen:

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. Fügen Sie in der Klasse _NativeInlinePageState die folgenden Mitglieder und Methoden für eine native Anzeige hinzu.

Beachten Sie, dass _kAdIndex den Index angibt, an dem eine Banneranzeige eingeblendet wird. Er wird verwendet, um den Elementindex aus der _getDestinationItemIndex()-Methode zu berechnen.

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. Erstellen und laden Sie in der Methode initState() eine NativeAd, die ListTileNativeAdFactory zum Generieren eines nativen Anzeigenaufrufs verwendet.

Beachten Sie, dass dieselbe Factory ID (listTile) verwendet wird, die für die Registrierung der Factory beim Plug-in verwendet wurde.

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. Passen Sie die Methode build() so an, dass eine Banneranzeige eingeblendet wird, sofern verfügbar.
  2. Aktualisieren Sie itemCount,, damit ein Banneranzeigeneintrag gezählt wird, und aktualisieren Sie den itemBuilder,, damit beim Laden der Anzeige eine Banneranzeige im Anzeigenindex (_kAdIndex) gerendert wird.
  3. Aktualisieren Sie den Code so, dass mit der Methode _getDestinationItemIndex() ein Index für das Inhaltselement abgerufen wird.

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. Geben Sie die mit dem NativeAd-Objekt verknüpfte Ressource frei, indem Sie die Methode NativeAd.dispose() in der Callback-Methode dispose() aufrufen.

native_inline_page.dart

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

  super.dispose();
}

Fertig! Führen Sie das Projekt aus und klicken Sie auf der Startseite auf die Schaltfläche Native Inline-Anzeige. Nachdem eine Anzeige geladen wurde, sehen Sie eine native Anzeige in der Mitte der Liste.

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. Fertig

Du hast das Codelab abgeschlossen. Du findest den fertigen Code für dieses Codelab im Ordner android_studio_folder.pngcomplete oder android_studio_folder.png complete_kotlin_swift.