flutter_native_ads

适用于 AdMob 原生广告的 Flutter 插件。使用 PlatformView 兼容 Android 和 iOS。

Android iOS
image image

入门

Android

AdMob 17要求在AndroidManifest.xml中包含App ID。如果
这样做,您的应用程序启动时将会崩溃。该行应为

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="[ADMOB_APP_ID]"/>

其中[ADMOB_APP_ID]是您的App ID。在您
在Dart代码中初始化插件时,必须传递相同的值。

iOS

Admob 7.42.0要求在Info.plist中包含App ID。未能这样做将导致您的应用程序在启动时崩溃。这些行应为

<key>GADApplicationIdentifier</key>
<string>[ADMOB_APP_ID]</string>

其中[ADMOB_APP_ID]是您的App ID。在初始化插件时,您必须传递相同的值。您的Dart代码。

以及PlatformView

<key>io.flutter.embedded_views_preview</key>
<true/>

布局

此插件支持自定义布局

Android

如果父级是ViewGroup,则可以使用任何内容。
示例使用RelativeLayout。

请使用 com.google.android.gms.ads.formats.UnifiedNativeAdView 作为父级。

image

请使用 com.google.android.gms.ads.formats.MediaView 作为MediaView。

image

  • xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.formats.UnifiedNativeAdView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/flutter_native_ad_unified_native_ad"
    ...
    
    <!-- ViewGroup -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        ...

        <com.google.android.gms.ads.formats.MediaView
            android:id="@+id/flutter_native_ad_media"
            ...

示例

iOS

请将 GADUnifiedNativeAdView 设置为父级。

image

请将 GADMediaView 设置为MediaView。

image

请为显示归属信息的视图设置恢复ID

image

示例

将原生广告映射到布局

需要映射视图

Android

按视图ID映射

视图 (View) ID
UnifiedNativeAdView flutter_native_ad_unified_native_ad
标题 flutter_native_ad_headline
主体 flutter_native_ad_body
MediaView flutter_native_ad_media
号召性用语 flutter_native_ad_call_to_action
归属 flutter_native_ad_attribution

iOS

按Outlet映射

image

用法

import 'package:flutter/material.dart';
import 'package:native_ads/native_ad_param.dart';
import 'package:native_ads/native_ad_view.dart';

import 'package:native_ads/native_ads.dart';

void main() {
  NativeAds.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('NativeAds example app'),
        ),
        body: Center(
          child: ListView.separated(
            itemBuilder: (context, index) {
              if (index % 10 == 0) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: double.infinity,
                    height: 320,
                    child: NativeAdView(
                      onParentViewCreated: (_) {
                      },
                      androidParam: AndroidParam()
                        ..placementId = "ca-app-pub-3940256099942544/2247696110" // test
                        ..packageName = "sakebook.github.com.native_ads_example"
                        ..layoutName = "native_ad_layout"
                        ..attributionText = "AD",
                      iosParam: IOSParam()
                        ..placementId = "ca-app-pub-3940256099942544/3986624511" // test
                        ..bundleId = "sakebook.github.com.nativeAdsExample"
                        ..layoutName = "UnifiedNativeAdView"
                        ..attributionText = "SPONSORED",
                      onAdImpression: () => print("onAdImpression!!!"),
                      onAdClicked: () => print("onAdClicked!!!"),
                      onAdFailedToLoad: (Map<String, dynamic> error) => print("onAdFailedToLoad!!! $error"),
                    ),
                  ),
                );
              } else {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "this is text $index",
                    style: Theme.of(context).textTheme.body1,
                  ),
                );
              }
            },
            itemCount: 50,
            separatorBuilder: (context, _) => const Divider(),
          ),
        ),
      ),
    );
  }
}

支持的原生广告字段

  • 标题
  • 主体
  • 媒体
  • 号召性用语
  • 广告归属

事件回调

通过将事件传递给NativeAdView构造函数来接收某些事件的回调

  • onAdImpression
  • onAdClicked
  • onAdFailedToLoad
  • onAdLeftApplication
  • onAdLoaded

GitHub

https://github.com/sakebook/flutter_native_ads