Thêm biểu ngữ AdMob và quảng cáo gốc cùng dòng vào ứng dụng Flutter

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ triển khai một biểu ngữ AdMob và quảng cáo gốc cùng dòng AdMob trong một ứng dụng Flutter.

Sản phẩm bạn sẽ tạo ra

Lớp học lập trình này hướng dẫn bạn cách triển khai biểu ngữ cùng dòng của AdMob và quảng cáo gốc cùng dòng AdMob trong ứng dụng Flutter bằng cách sử dụng trình bổ trợ Quảng cáo trên thiết bị di động của Google cho Flutter.

Nếu bạn gặp vấn đề (lỗi trong đoạn mã, lỗi ngữ pháp, từ ngữ không rõ ràng, v.v.) khi thực hành theo lớp học lập trình này, hãy báo cáo vấn đề bằng đường liên kết Báo cáo lỗi ở góc dưới bên trái lớp học lập trình.

Kiến thức bạn sẽ học được

  • Cách định cấu hình trình bổ trợ Flutter dành cho Quảng cáo trên thiết bị di động của Google
  • Cách triển khai biểu ngữ cùng dòng và quảng cáo có tặng thưởng trong ứng dụng Flutter

Bạn cần có

  • Android Studio 4.1 trở lên
  • Xcode 12 trở lên (để phát triển iOS)

Bạn đánh giá mức độ trải nghiệm của mình với AdMob như thế nào?

Người mới tập Trung cấp Thành thạo

Bạn đánh giá thế nào về mức độ trải nghiệm của mình với Flutter?

Người mới tập Trung cấp Thành thạo

2. Thiết lập môi trường phát triển Flutter

Bạn cần có 2 phần mềm để hoàn thành phòng thí nghiệm này – Flutter SDK và trình chỉnh sửa.

Bạn có thể chạy lớp học lập trình bằng bất kỳ thiết bị nào sau đây:

  • Một thiết bị Android hoặc iOS thực kết nối với máy tính của bạn và đặt ở Chế độ nhà phát triển.
  • Trình mô phỏng iOS (yêu cầu cài đặt công cụ Xcode).
  • Trình mô phỏng Android (yêu cầu thiết lập trong Android Studio).
  • Trình duyệt (cần có Chrome để gỡ lỗi).
  • Dưới dạng ứng dụng Windows, Linux hoặc macOS. Bạn phải phát triển trên nền tảng mà bạn dự định triển khai. Vì vậy, nếu muốn phát triển một ứng dụng Windows dành cho máy tính, bạn phải phát triển trên Windows để truy cập vào chuỗi bản dựng phù hợp. Có các yêu cầu cụ thể theo hệ điều hành được đề cập chi tiết trên docs.flutter.dev/desktop.

Tải mã xuống

Sau khi bạn tải tệp zip xuống, hãy giải nén nội dung của tệp. Bạn sẽ có một thư mục có tên admob-inline-ads-in-flutter-main.

Ngoài ra, bạn có thể sao chép kho lưu trữ GitHub từ dòng lệnh:

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

Kho lưu trữ chứa ba thư mục:

  • android_studio_folder.png starter (khởi đầu): Đoạn mã khởi đầu mà bạn sẽ tạo trong lớp học lập trình này.
  • Đã hoàn tất android_studio_folder.png : Đã hoàn tất mã cho lớp học lập trình này. (Java và Target-C đối với mã gốc)
  • android_studio_folder.png complete_kotlin_swift: Đoạn mã đã hoàn tất cho lớp học lập trình này. (Kotlin và Swift đối với mã gốc)

3. Thiết lập ứng dụng và đơn vị quảng cáo AdMob

Vì Flutter là một SDK đa nền tảng, nên bạn cần thêm một ứng dụng và đơn vị quảng cáo cho cả Android và iOS trong AdMob.

Thiết lập cho Android

Để thiết lập cho Android, bạn cần thêm một ứng dụng Android và tạo đơn vị quảng cáo.

Thêm ứng dụng Android

  1. Trong Bảng điều khiển của AdMob, hãy nhấp vào THÊM ỨNG DỤNG trên trình đơn Ứng dụng.
  2. Khi được hỏi Bạn đã xuất bản ứng dụng trên Google Play hoặc App Store chưa?, hãy nhấp vào KHÔNG.
  3. Nhập AdMob inline ads vào trường tên ứng dụng rồi chọn Android làm nền tảng.

d51828db0e2e4f6c.png

  1. Bạn không cần bật chỉ số người dùng để hoàn thành lớp học lập trình này. Tuy nhiên, bạn nên làm như vậy vì việc này giúp bạn hiểu rõ hơn hành vi của người dùng. Nhấp vào THÊM để hoàn tất quy trình này.

b918bf44362813a9.png

Tạo đơn vị quảng cáo

Cách thêm đơn vị quảng cáo:

  1. Chọn ứng dụng Quảng cáo nội tuyến AdMob từ trình đơn Ứng dụng trong bảng điều khiển AdMob.
  2. Nhấp vào trình đơn Đơn vị quảng cáo.

Quảng cáo biểu ngữ

  1. Nhấp vào THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Biểu ngữ.
  3. Nhập android-inline-banner vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Gốc

  1. Nhấp vào THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn Gốc nâng cao làm định dạng.
  3. Nhập android-inline-native vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Thường phải mất vài giờ để một đơn vị quảng cáo mới có thể phân phát quảng cáo.

Nếu bạn muốn thử nghiệm hành vi của quảng cáo ngay lập tức, hãy sử dụng mã ứng dụng thử nghiệm và mã đơn vị quảng cáo được liệt kê trong bảng Mã ứng dụng Android/Mã đơn vị quảng cáo và bảng Mã ứng dụng/Mã đơn vị quảng cáo dành cho iOS.

Thiết lập cho iOS

Để thiết lập quảng cáo cho iOS, bạn cần thêm một ứng dụng iOS và tạo đơn vị quảng cáo.

Thêm ứng dụng iOS

  1. Trong Bảng điều khiển của AdMob, hãy nhấp vào THÊM ỨNG DỤNG trên trình đơn Ứng dụng.
  2. Khi được hỏi Bạn đã xuất bản ứng dụng trên Google Play hoặc App Store chưa?, hãy nhấp vào KHÔNG.
  3. Nhập AdMob inline ads vào trường tên ứng dụng rồi chọn iOS làm nền tảng.

a4c963c9aa09519.png

  1. Bạn không cần bật chỉ số người dùng để hoàn thành lớp học lập trình này. Tuy nhiên, bạn nên làm như vậy vì việc này giúp bạn hiểu rõ hơn hành vi của người dùng. Nhấp vào THÊM để hoàn tất quy trình này.

b918bf44362813a9.png

Tạo đơn vị quảng cáo

Cách thêm đơn vị quảng cáo:

  1. Chọn ứng dụng Quảng cáo nội tuyến AdMob từ trình đơn Ứng dụng trong bảng điều khiển AdMob.
  2. Nhấp vào trình đơn Đơn vị quảng cáo.

Quảng cáo biểu ngữ

  1. Nhấp vào THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Biểu ngữ.
  3. Nhập ios-inline-banner vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Gốc

  1. Nhấp vào THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn Gốc nâng cao làm định dạng.
  3. Nhập ios-inline-native vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Thường phải mất vài giờ để một đơn vị quảng cáo mới có thể phân phát quảng cáo.

Nếu bạn muốn thử nghiệm hành vi của quảng cáo ngay lập tức, hãy sử dụng mã ứng dụng thử nghiệm và mã đơn vị quảng cáo được liệt kê trong bảng sau.

Không bắt buộc: Sử dụng ứng dụng và đơn vị quảng cáo AdMob thử nghiệm

Nếu muốn theo dõi lớp học lập trình thay vì tự tạo một ứng dụng và đơn vị quảng cáo mới, bạn có thể sử dụng mã ứng dụng AdMob thử nghiệm và mã đơn vị quảng cáo được liệt kê trong các bảng sau.

Mã ứng dụng Android/Mã đơn vị quảng cáo

Item

mã ứng dụng/mã đơn vị quảng cáo

Mã ứng dụng AdMob

ca-app-pub-3940256099942544~3347511713

Biểu ngữ

ca-app-pub-3940256099942544/6300978111

Mã gốc

ca-app-pub-3940256099942544/2247696110

Mã ứng dụng iOS/Mã đơn vị quảng cáo

Item

mã ứng dụng/mã đơn vị quảng cáo

Mã ứng dụng AdMob

ca-app-pub-3940256099942544~1458002511

Biểu ngữ

ca-app-pub-3940256099942544/2934735716

Mã gốc

ca-app-pub-3940256099942544/3986624511

Để biết thêm thông tin về quảng cáo thử nghiệm, hãy tham khảo tài liệu dành cho nhà phát triển về quảng cáo thử nghiệm trên Android và quảng cáo thử nghiệm trên iOS.

4. Thêm trình bổ trợ Flutter dành cho Quảng cáo trên thiết bị di động của Google

Flutter sử dụng trình bổ trợ để cung cấp quyền truy cập vào nhiều dịch vụ dành riêng cho nền tảng. Trình bổ trợ cho phép bạn truy cập vào các dịch vụ và API trên từng nền tảng.

Trình bổ trợ google_mobile_ads hỗ trợ tải và hiển thị quảng cáo biểu ngữ, quảng cáo xen kẽ, quảng cáo có tặng thưởng và quảng cáo gốc bằng cách sử dụng API AdMob.

Vì Flutter là một SDK đa nền tảng, nên bạn có thể sử dụng trình bổ trợ google_mobile_ads cho cả iOS và Android. Vì vậy, nếu bạn thêm trình bổ trợ vào ứng dụng Flutter, thì trình bổ trợ này sẽ được sử dụng trên cả phiên bản Android và iOS của ứng dụng quảng cáo cùng dòng AdMob.

Thêm trình bổ trợ Quảng cáo của Google trên thiết bị di động làm phần phụ thuộc

Để truy cập vào API AdMob từ dự án quảng cáo nội tuyến AdMob, hãy thêm google_mobile_ads làm phần phụ thuộc vào tệp pubspec.yaml nằm ở gốc dự án.

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

...

Nhấp vào Pub get để cài đặt trình bổ trợ này trong dự án quảng cáo nội tuyến AdMob.

93ef6061e58ebc86.pngS

Cập nhật AndroidManifest.xml (Android)

  1. Mở tệp android/app/src/main/AndroidManifest.xml trong Android Studio.
  2. Thêm mã ứng dụng AdMob bằng cách thêm thẻ <meta-data> có tên com.google.android.gms.ads.APPLICATION_ID. Ví dụ: nếu mã ứng dụng AdMob của bạn là ca-app-pub-3940256099942544~3347511713, thì bạn cần thêm các dòng sau vào tệp AndroidManifest.xml.

AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

Cập nhật Info.plist (iOS)

  1. Mở tệp ios/Runner/Info.plist trong Android Studio.
  2. Thêm khoá GADApplicationIdentifier bằng giá trị chuỗi của mã ứng dụng AdMob. Ví dụ: nếu mã ứng dụng AdMob của bạn là ca-app-pub-3940256099942544~1458002511, thì bạn cần thêm các dòng sau vào tệp Info.plist.

ios/Runner/Info.plist

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

5. Thêm một lớp trợ giúp cho quảng cáo

Tạo một tệp mới có tên ad_helper.dart trong thư mục lib. Sau đó, hãy triển khai lớp AdHelper. Lớp này cung cấp mã ứng dụng AdMob và mã đơn vị quảng cáo cho Android và iOS.

Hãy nhớ thay thế mã ứng dụng AdMob (ca-app-pub-xxxxxx~yyyyy) và mã đơn vị quảng cáo (ca-app-pub-xxxxxxx/yyyyyyyy) bằng những mã mà bạn đã tạo trong bước trước đó.

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

Hãy sử dụng đoạn mã sau nếu bạn muốn sử dụng mã ứng dụng AdMob thử nghiệm và mã đơn vị quảng cáo thử nghiệm.

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. Chạy SDK Quảng cáo của Google trên thiết bị di động

Trước khi tải quảng cáo, bạn cần khởi chạy SDK Quảng cáo của Google trên thiết bị di động. Mở tệp lib/home_page.dart và sửa đổi _initGoogleMobileAds() để khởi chạy SDK trước khi trang chủ được tải.

Lưu ý rằng bạn cần thay đổi loại dữ liệu trả về của phương thức _initGoogleMobileAds() từ Future<dynamic> thành Future<InitializationStatus> để nhận kết quả khởi chạy SDK sau khi hoàn tất.

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. Thêm quảng cáo biểu ngữ

Trong phần này, bạn hiển thị một quảng cáo biểu ngữ ở giữa danh sách, như trong ảnh chụp màn hình sau đây.

62c405c962909fd3.png.

  1. Mở tệp lib/banner_inline_page.dart.
  2. Nhập ad_helper.dart và google_mobile_ads.dart bằng cách thêm các dòng sau:
...

// 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. Trong lớp _BannerInlinePageState, hãy thêm các thành phần và phương thức sau cho quảng cáo biểu ngữ.

Xin lưu ý rằng _kAdIndex cho biết chỉ mục nơi quảng cáo biểu ngữ sẽ hiển thị và được dùng để tính chỉ mục mặt hàng từ phương thức _getDestinationItemIndex().

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. Trong phương thức initState(), hãy tạo và tải một BannerAd cho biểu ngữ 320x50 (AdSize.banner). Xin lưu ý rằng trình nghe sự kiện quảng cáo được định cấu hình để cập nhật giao diện người dùng (setState()) khi quảng cáo được tải.

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. Sửa đổi phương thức build() để hiển thị quảng cáo biểu ngữ (nếu có).
  2. Cập nhật itemCount, để tính một mục nhập quảng cáo biểu ngữ và cập nhật itemBuilder, để hiển thị quảng cáo biểu ngữ tại chỉ mục quảng cáo (_kAdIndex) khi quảng cáo được tải.
  3. Cập nhật mã để sử dụng phương thức _getDestinationItemIndex() nhằm truy xuất chỉ mục cho mục nội dung.

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. Giải phóng tài nguyên liên kết với đối tượng BannerAd bằng cách gọi phương thức BannerAd.dispose() trong phương thức gọi lại dispose().

banner_inline_page.dart

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

  super.dispose();
}

Vậy là xong! Chạy dự án và nhấp vào nút Quảng cáo biểu ngữ cùng dòng trên trang chủ. Sau khi tải quảng cáo, bạn sẽ thấy một quảng cáo biểu ngữ ở giữa danh sách.

a5f857a850539fe9.png c32af50872514224.png

8. Thêm quảng cáo gốc

Trong phần này, bạn hiển thị một quảng cáo gốc ở giữa danh sách, như trong ảnh chụp màn hình sau đây.

f1671b0fa349ccf8.png

Quảng cáo gốc được hiển thị cho người dùng bằng cách sử dụng các thành phần giao diện người dùng vốn có của nền tảng (ví dụ: View trên Android hoặc UIView trên iOS).

Tuy nhiên, bạn không thể trực tiếp tạo các thành phần giao diện người dùng gốc bằng cách sử dụng các tiện ích Flutter. Vì vậy, bạn phải triển khai NativeAdFactory cho mỗi nền tảng, dùng để tạo chế độ xem quảng cáo gốc dành riêng cho từng nền tảng (NativeAdView trên Android và GADNativeAdView trên iOS) từ đối tượng quảng cáo gốc (NativeAd trên Android và GADNativeAd trên iOS).

Triển khai OAuthFactory cho Android (Java)

  1. Mở tệp android/build.gradle (hoặc bất kỳ tệp nào trong thư mục android) rồi nhấp vào Mở để chỉnh sửa trong Android Studio để mở một dự án Android.

623ad3d2282ccbf8.png.

  1. Nếu bạn được yêu cầu chọn một cửa sổ để mở dự án mới, hãy nhấp vào New Window (Cửa sổ mới) để dự án Flutter vẫn mở trong khi bạn làm việc trên dự án Android.

d188bb51cf7c2d08.png

Tạo bố cục quảng cáo gốc

  1. Khi dự án Android đang mở, hãy nhấp chuột phải vào app (ứng dụng) trong ngăn dự án trong Android Studio rồi chọn New > (Mới) > Android Resource File (Tệp tài nguyên Android) từ trình đơn theo bối cảnh.

2b629ee277a68fd7.pngS

  1. Trong hộp thoại New Resource File (Tệp tài nguyên mới), hãy nhập list_tile_native_ad.xml làm tên tệp.
  2. Chọn loại tài nguyên là Layout (Bố cục) rồi nhập com.google.android.gms.ads.nativead.NativeAdView làm thành phần gốc.
  3. Nhấp vào OK để tạo tệp bố cục mới.

575f126dd018bc0.pngS

  1. Triển khai bố cục quảng cáo như sau. Xin lưu ý rằng bố cục phải phù hợp với thiết kế trực quan của trải nghiệm người dùng trên nền tảng bạn định hướng tới.

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>

Tạo lớp ListTileNotificationFactory

  1. Trong ngăn Project (Dự án), hãy nhấp chuột phải vào gói com.codelab.flutter.admobinlineads rồi chọn Mới > Lớp Java.

9f3f111dd207a9b4.pngS

  1. Nhập tên là ListTileNativeAdFactory rồi chọn Class (Lớp) trong danh sách.

47ff82d92676e26.pngs

  1. Sau khi hộp thoại New Class (Lớp mới) xuất hiện, hãy để trống mọi thông tin rồi nhấp vào OK.

Bạn sẽ thấy lớp ListTileNativeAdFactory được tạo trong gói com.codelab.flutter.admobinlineads.

e4ed232c358ffb19.png

  1. Triển khai lớp ListTileNativeAdFactory như sau. Xin lưu ý rằng lớp này sẽ triển khai phương thức createNativeAd() trong giao diện GoogleMobileAdsPlugin.NativeAdFactory.

Lớp factory chịu trách nhiệm tạo đối tượng chế độ xem để hiển thị quảng cáo gốc. Như bạn có thể thấy trong mã, lớp nhà máy sẽ tạo một UnifiedNativeAdView và điền vào đối tượng đó bằng một đối tượng NativeAd.

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

Đăng ký lớp ListTile claimFactory

Một thực thể của NativeAdFactory phải được đăng ký với GoogleMobileAdsPlugin trước khi có thể sử dụng từ Flutter.

  1. Mở tệp MainActivity.java rồi ghi đè phương thức configureFlutterEngine() và phương thức cleanUpFlutterEngine().
  2. Đăng ký lớp ListTileNativeAdFactory bằng một mã nhận dạng chuỗi duy nhất (listTile) trong phương thức 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. Bạn nên huỷ đăng ký mọi thực thể NativeAdFactory trong quá trình dọn dẹp. Huỷ đăng ký lớp ListTileNativeAdFactory trong phương thức cleanUpFlutterEngine().

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

Bây giờ, bạn đã sẵn sàng sử dụng lớp ListTileNativeAdFactory để hiển thị quảng cáo gốc trên Android.

Triển khai GADFactory cho Android (Kotlin)

  1. Mở tệp android/build.gradle (hoặc bất kỳ tệp nào trong thư mục android) rồi nhấp vào Mở để chỉnh sửa trong Android Studio để mở một dự án Android.

623ad3d2282ccbf8.png.

  1. Nếu bạn được yêu cầu chọn một cửa sổ để mở dự án mới, hãy nhấp vào New Window (Cửa sổ mới) để dự án Flutter vẫn mở trong khi bạn làm việc trên dự án Android.

d188bb51cf7c2d08.png

Tạo bố cục quảng cáo gốc

  1. Khi dự án Android đang mở, hãy nhấp chuột phải vào app (ứng dụng) trong ngăn dự án trong Android Studio rồi chọn New > (Mới) > Android Resource File (Tệp tài nguyên Android) từ trình đơn theo bối cảnh.

2b629ee277a68fd7.pngS

  1. Trong hộp thoại New Resource File (Tệp tài nguyên mới), hãy nhập list_tile_native_ad.xml làm tên tệp.
  2. Chọn loại tài nguyên là Layout (Bố cục) rồi nhập com.google.android.gms.ads.nativead.NativeAdView làm thành phần gốc.
  3. Nhấp vào OK để tạo tệp bố cục mới.

575f126dd018bc0.pngS

  1. Triển khai bố cục quảng cáo như sau. Xin lưu ý rằng bố cục phải phù hợp với thiết kế trực quan của trải nghiệm người dùng trên nền tảng bạn định hướng tới.

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>

Tạo lớp ListTileNotificationFactory

  1. Trong ngăn Project (Dự án), hãy nhấp chuột phải vào gói com.codelab.flutter.admobinlineads rồi chọn Mới > Tệp/Lớp Kotlin.

7311744cb97cad75.pngS

  1. Nhập tên là ListTileNativeAdFactory rồi chọn Class (Lớp) trong danh sách.

25691151b5814867.pngS

  1. Bạn sẽ thấy lớp ListTileNativeAdFactory được tạo trong gói com.codelab.flutter.admobinlineads.
  2. Triển khai lớp ListTileNativeAdFactory như sau. Xin lưu ý rằng lớp này sẽ triển khai phương thức createNativeAd() trong giao diện GoogleMobileAdsPlugin.NativeAdFactory.

Lớp factory chịu trách nhiệm tạo đối tượng chế độ xem để hiển thị quảng cáo gốc. Như bạn có thể thấy trong mã, lớp nhà máy sẽ tạo một NativeAdView và điền vào đối tượng đó bằng một đối tượng NativeAd.

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

Đăng ký lớp ListTile claimFactory

Một thực thể của NativeAdFactory phải được đăng ký với GoogleMobileAdsPlugin trước khi có thể sử dụng từ Flutter.

  1. Mở tệp MainActivity.kt rồi ghi đè phương thức configureFlutterEngine() và phương thức cleanUpFlutterEngine().
  2. Đăng ký lớp ListTileNativeAdFactory bằng một mã nhận dạng chuỗi duy nhất (listTile) trong phương thức 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. Bạn nên huỷ đăng ký mọi thực thể NativeAdFactory trong quá trình dọn dẹp. Huỷ đăng ký lớp ListTileNativeAdFactory trong phương thức cleanUpFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

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

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

Bây giờ, bạn đã sẵn sàng sử dụng lớp ListTileNativeAdFactory để hiển thị quảng cáo gốc trên Android.

Triển khai PARTICIPANTFactory cho iOS (Target-C)

Mở tệp ios/Podfile (hoặc bất kỳ tệp nào trong thư mục ios) rồi nhấp vào Mở mô-đun iOS trong Xcode để mở dự án iOS.

62aa12c10e6d671f.png.

Chuẩn bị bố cục quảng cáo gốc

Bạn sẽ cần có chế độ xem tuỳ chỉnh (*.xib) để bố trí các thành phần quảng cáo gốc. Trong lớp học lập trình này, thành phần hiển thị được định cấu hình sẵn dùng để giảm thiểu công sức của bạn.

Khi dự án iOS được mở trong Xcode, hãy xác nhận rằng ListTileNativeAdView.xib tồn tại trong dự án ListTileNativeAdView.xib.

a5f04a32f1868d4f.png

Tạo lớp ListTileNotificationFactory

  1. Trên trình điều hướng của dự án, hãy nhấp chuột phải vào nhóm Runner rồi chọn New File (Tệp mới) để tạo tệp tiêu đề cho lớp mới.

6455aab9e9881ca.png.

  1. Trong hộp thoại mẫu, hãy chọn Header File (Tệp tiêu đề) rồi đặt tên là ListTileNativeAdFactory.
  2. Sau khi tạo tệp ListTileNativeAdFactory.h, hãy xác định lớp ListNativeAdFactory như sau:

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. Tạo tệp Target-C bằng cách chọn New File (Tệp mới) từ nhóm Runner.
  2. Trong hộp thoại tiếp theo, hãy nhập ListTileNativeAdFactory vào trường File (Tệp) rồi chọn Empty File (Tệp trống) làm loại tệp.

2c9c998c48db3a0.pngS

  1. Sau khi nhấp vào Tiếp theo, bạn sẽ được yêu cầu chọn một thư mục nơi bạn sẽ tạo tệp mới. Giữ nguyên mọi thứ, rồi nhấp vào Tạo.

8635ffe502d1f4ab.png.

  1. Triển khai lớp ListTileNativeFactory như sau. Xin lưu ý rằng lớp này sẽ triển khai phương thức createNativeAd() trong giao thức FLTNativeAdFactory.

Lớp factory chịu trách nhiệm tạo đối tượng chế độ xem để hiển thị quảng cáo gốc. Như bạn có thể thấy trong mã, lớp nhà máy sẽ tạo một GADNativeAdView và điền vào đối tượng đó bằng một đối tượng GADNativeAd.

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

Đăng ký lớp ListTiletagmanagerFacotry

Bạn phải đăng ký phương thức triển khai FLTNativeAdFactory cho FLTGoogleMobileAdsPlugin trước khi có thể sử dụng từ Flutter.

Mở tệp AppDelegate.m và đăng ký ListTileNativeAdFactory với một mã nhận dạng chuỗi duy nhất (listTile) bằng cách gọi phương thức [FLTGoogleMobileAdsPlugin registerNativeAdFactory].

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

Bây giờ, bạn đã sẵn sàng sử dụng ListTileNativeAdFactory để hiển thị quảng cáo gốc trên iOS.

Triển khai tagmanagerFactory cho iOS (Swift)

Mở tệp ios/Podfile (hoặc bất kỳ tệp nào trong thư mục ios) rồi nhấp vào Mở mô-đun iOS trong Xcode để mở dự án iOS.

62aa12c10e6d671f.png.

Chuẩn bị bố cục quảng cáo gốc

Bạn sẽ cần có chế độ xem tuỳ chỉnh (*.xib) để bố trí các thành phần quảng cáo gốc. Trong lớp học lập trình này, thành phần hiển thị được định cấu hình sẵn dùng để giảm thiểu công sức của bạn.

Khi dự án iOS được mở trong Xcode, hãy xác nhận rằng ListTileNativeAdView.xib tồn tại trong dự án ListTileNativeAdView.xib.

a5f04a32f1868d4f.png

Tạo lớp ListTileNotificationFactory

  1. Trên trình điều hướng của dự án, hãy nhấp chuột phải vào nhóm Runner rồi chọn New File (Tệp mới) để tạo tệp tiêu đề cho lớp mới.

9115c92543345ef1.pngs

  1. Trong hộp thoại mẫu, hãy chọn Swift File (Tệp Swift) rồi đặt tên là ListTileNativeAdFactory.
  2. Sau khi tạo tệp ListTileNativeAdFactory.swift, hãy triển khai lớp ListNativeAdFactory.

Xin lưu ý rằng lớp này sẽ triển khai phương thức createNativeAd() trong giao thức FLTNativeAdFactory.

Lớp factory chịu trách nhiệm tạo đối tượng chế độ xem để hiển thị quảng cáo gốc. Như bạn có thể thấy trong mã, lớp nhà máy sẽ tạo một GADNativeAdView và điền vào đối tượng đó bằng một đối tượng GADNativeAd.

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

Đăng ký lớp ListTiletagmanagerFacotry

Bạn phải đăng ký phương thức triển khai FLTNativeAdFactory cho FLTGoogleMobileAdsPlugin trước khi có thể sử dụng từ Flutter.

Mở tệp AppDelegate.m và đăng ký ListTileNativeAdFactory với một mã nhận dạng chuỗi duy nhất (listTile) bằng cách gọi phương thức FLTGoogleMobileAdsPlugin.registerNativeAdFactory().

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

Bây giờ, bạn đã sẵn sàng sử dụng ListTileNativeAdFactory để hiển thị quảng cáo gốc trên iOS.

Tích hợp quảng cáo gốc với các tiện ích Flutter

  1. Mở tệp lib/native_inline_page.dart. Sau đó, hãy nhập ad_helper.dart và google_mobile_ads.dart bằng cách thêm các dòng sau:

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. Trong lớp _NativeInlinePageState, hãy thêm các thành phần và phương thức sau cho quảng cáo gốc.

Xin lưu ý rằng _kAdIndex cho biết chỉ mục nơi quảng cáo biểu ngữ sẽ hiển thị và được dùng để tính chỉ mục mặt hàng từ phương thức _getDestinationItemIndex().

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. Trong phương thức initState(), hãy tạo và tải một NativeAd sử dụng ListTileNativeAdFactory để tạo chế độ xem quảng cáo gốc.

Xin lưu ý rằng hệ thống sẽ sử dụng cùng một mã trạng thái ban đầu (listTile) dùng để đăng ký trạng thái ban đầu cho trình bổ trợ.

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. Sửa đổi phương thức build() để hiển thị quảng cáo biểu ngữ (nếu có).
  2. Cập nhật itemCount, để tính một mục nhập quảng cáo biểu ngữ và cập nhật itemBuilder, để hiển thị quảng cáo biểu ngữ ở chỉ mục quảng cáo (_kAdIndex) khi quảng cáo được tải.
  3. Cập nhật mã để sử dụng phương thức _getDestinationItemIndex() nhằm truy xuất chỉ mục cho mục nội dung.

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. Giải phóng tài nguyên liên kết với đối tượng NativeAd bằng cách gọi phương thức NativeAd.dispose() trong phương thức gọi lại dispose().

native_inline_page.dart

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

  super.dispose();
}

Vậy là xong! Chạy dự án và nhấp vào nút Quảng cáo gốc cùng dòng trên trang chủ. Sau khi tải quảng cáo, bạn sẽ thấy một quảng cáo gốc ở giữa danh sách.

f1671b0fa349ccf8.png 5ead873222c800eb.png.

9. Đã xong!

Bạn đã hoàn thành lớp học lập trình. Bạn có thể tìm mã đã hoàn tất cho lớp học lập trình này trong thư mục android_studio_folder.pngcomplete hoặc thư mục android_studio_folder.png complete_kotlin_swift.