Flutter原生广告集成插件native_ads的使用

flutter_native_ads

Flutter 插件用于 AdMob 原生广告。支持 Android 和 iOS 使用 PlatformView。

Android	iOS

开始使用插件native_ads

Android

AndroidManifest.xml 修改

在 AndroidManifest.xml 中添加 App ID。
如果没有正确配置，应用启动时会崩溃。

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

将 [ADMOB_APP_ID] 替换为您的 AdMob 应用 ID。在 Dart 代码初始化插件时也需要传递相同的值。

iOS

Info.plist 修改

在 Info.plist 中添加 App ID。
如果没有正确配置，应用启动时会崩溃。

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

将 [ADMOB_APP_ID] 替换为您的 AdMob 应用 ID。
同时需要设置以下键以启用嵌入视图预览：

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

布局

该插件支持自定义布局。您需要创建一个布局文件。

Android

您可以使用任何父级为 ViewGroup 的布局。示例使用了 ConstraintLayout。

UnifiedNativeAdView

使用 <com.google.android.gms.ads.formats.UnifiedNativeAdView> 作为父级视图。

MediaView

使用 <com.google.android.gms.ads.formats.MediaView> 作为媒体视图。

示例 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"
    ...>

    <!-- 父容器 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        ...

        <!-- 媒体视图 -->
        <com.google.android.gms.ads.formats.MediaView
            android:id="@+id/flutter_native_ad_media"
            ... />
</code></pre>

完整示例可参考 [GitHub](https://github.com/sakebook/flutter_native_ads/blob/master/example/android/app/src/main/res/layout/native_ad_layout.xml)。

---

### iOS  
#### GADUnifiedNativeAdView  
使用 `<GADUnifiedNativeAdView>` 作为父级视图。  

#### GADMediaView  
使用 `<GADMediaView>` 作为媒体视图。  

##### 示例 XIB 文件  
完整示例可参考 [GitHub](https://github.com/sakebook/flutter_native_ads/blob/master/example/ios/Runner/UnifiedNativeAdView.xib)。

---

## 映射原生广告到布局  

需要将广告视图映射到布局中的具体控件。

### Android  
通过视图 ID 映射。  

| 视图名称         | ID                          |
| ---------------- | --------------------------- |
| UnifiedNativeAdView | flutter_native_ad_unified_native_ad |
| Headline         | flutter_native_ad_headline   |
| Body             | flutter_native_ad_body       |
| Call To Action   | flutter_native_ad_call_to_action |
| Attribution      | flutter_native_ad_attribution |
| MediaView        | flutter_native_ad_media      |
| Icon             | flutter_naitve_ad_icon       |
| Star rating      | flutter_naitve_ad_star       |
| Store            | flutter_naitve_ad_store      |
| Price            | flutter_naitve_ad_price      |
| Advertiser       | flutter_naitve_ad_advertiser |

---

### iOS  
通过 Outlet 映射。  

![](https://raw.githubusercontent.com/sakebook/flutter_native_ads/master/art/ios_mapping.png)

---

## 使用示例  

以下是完整的 Flutter 原生广告集成示例代码：

```dart
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() {
  WidgetsFlutterBinding.ensureInitialized();
  NativeAds.initialize(); // 初始化插件
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('NativeAds 示例应用'),
        ),
        body: Center(
          child: ListView.separated(
            itemBuilder: (context, index) {
              if (index % 10 == 0) { // 每 10 行插入一次广告
                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" // 测试广告位 ID
                        ..packageName = "{{YOUR_ANDROID_APP_PACKAGE_NAME}}" // Android 包名
                        ..layoutName = "{{YOUR_CREATED_LAYOUT_FILE_NAME}}" // 自定义布局文件名
                        ..attributionText = "AD", // 广告来源文字
                      iosParam: IOSParam()
                        ..placementId = "ca-app-pub-3940256099942544/3986624511" // 测试广告位 ID
                        ..bundleId = "{{YOUR_IOS_APP_BUNDLE_ID}}" // iOS Bundle ID
                        ..layoutName = "{{YOUR_CREATED_LAYOUT_FILE_NAME}}" // 自定义布局文件名
                        ..attributionText = "SPONSORED", // 广告来源文字
                      onAdImpression: () => print("广告被展示！"), // 广告展示回调
                      onAdClicked: () => print("广告被点击！"), // 广告点击回调
                      onAdFailedToLoad: (error) => print("加载失败：$error"), // 加载失败回调
                    ),
                  ),
                );
              } else {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "这是文本 $index",
                    style: Theme.of(context).textTheme.body1,
                  ),
                );
              }
            },
            itemCount: 50, // 列表总行数
            separatorBuilder: (context, _) => const Divider(), // 分隔线
          ),
        ),
      ),
    );
  }
}