Template native di Dart

Template native adalah tampilan lengkap kode untuk iklan native Anda, yang dirancang untuk implementasi dan mudah dimodifikasi. Dengan template native, plugin ini menyediakan tata letak bawaan Android dan iOS untuk Anda, dan Anda bisa menyesuaikan gaya aset native menggunakan Dart API.

Panduan ini menunjukkan cara menggunakan Dart API untuk memberi sentuhan gaya pada tampilan platform dan untuk merender iklan.

Prasyarat

  • Flutter 2.4.0 atau yang lebih tinggi.

Selalu uji dengan iklan percobaan

Saat membuat dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi secara langsung. Cara termudah untuk memuat iklan percobaan adalah dengan menggunakan ID unit iklan percobaan untuk iklan native:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Unit iklan percobaan dikonfigurasi guna menampilkan iklan percobaan untuk setiap permintaan, jadi Anda dapat menggunakannya di aplikasi Anda sendiri saat melakukan {i>coding<i}, menguji, dan proses debug—cukup pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi Anda.

Muat iklan

Contoh berikut memuat iklan native menggunakan native berukuran medium {i>template<i}:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Lihat NativeTemplateStyle dan NativeTemplateTextStyle untuk opsi gaya yang tersedia.

Sesuaikan iklan

Saat menyesuaikan iklan native menggunakan template native, konfigurasi UI iklan Anda akan aktif di class NativeTemplateStyle, sehingga Anda dapat menata gaya seluruh iklan native dalam kode Dart.

Ukuran template

Template iklan native Flutter tersedia dalam dua jenis: TemplateType.small dan TemplateType.medium. Template kecil ini ideal untuk TableView atau GridView, untuk iklan dalam feed atau di mana pun Anda memerlukan tampilan iklan persegi panjang tipis. Tujuan berarti template medium adalah setengah hingga tiga perempat tampilan halaman, ideal untuk halaman landing atau pembuka.

Kecil

Android
iOS
Sedang

Android
iOS

Peristiwa iklan native

Agar diberi tahu tentang peristiwa yang terkait dengan interaksi iklan native, gunakan listener iklan. Kemudian, implementasikan NativeAdListener untuk menerima callback peristiwa iklan.

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Iklan Display

Untuk menampilkan NativeAd sebagai widget, Anda harus membuat instance AdWidget dengan iklan yang didukung setelah memanggil load(). Anda dapat membuat widget sebelum memanggil load(), tetapi load() harus dipanggil sebelum menambahkannya ke widget hierarki.

AdWidget mewarisi dari class Widget Flutter dan dapat digunakan seperti class lainnya . Di iOS, pastikan Anda menempatkan widget dalam container dengan lebar dan tinggi. Jika tidak, iklan Anda mungkin tidak dapat ditampilkan.

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

Buang iklan

J NativeAd harus dibuang jika akses ke data tersebut tidak lagi diperlukan. Praktik terbaik untuk kapan harus memanggil dispose() adalah setelah AdWidget yang dikaitkan dengan iklan native dihapus dari hierarki widget dan di AdListener.onAdFailedToLoad() .

Langkah berikutnya

Contoh lengkap di GitHub

Template Native