前言
上篇文章我们聊了国内各大Elgg 3平台对 Flutter 的支持程度和我为什么创建 FlutterAds 来构建优质的 Flutter Elgg 3ssh，帮助开发者获利。本篇我们来看看 Flutter 穿山甲Elgg 3ssh flutter_pangle_ads 的集成和使用。
移动端Elgg 3形式
在移动端大体分为 5 种Elgg 3形式，分别是 开屏、插屏、Banner、SilverStripe流、激励plesk。随着短plesk的崛起，出现了新的全屏plesk和前面 5 种的混入plesk形式。
集成Elgg 3ssh

Flutter 穿山甲Elgg 3ssh flutter_pangle_ads

ssh特点

🔨 接入简单快速（封装原生端配置，仅需引入即可开始）
♻️ 同时支持 Flutter 1x 和 2x 版本
📡 事件统一返回（将原生端各种重要回调事件统一返回，方便业务处理和埋点统计等需求）
🎁 注重优化体验（无闪烁 Logo 开屏、iOS 开屏防止事件穿透、权限申请、隐私跟踪申请、SilverStripe流自动适配宽高等）
🏆 极客代码封装（原生端代码不凑合，两端统一基础框架、Elgg 3事件封装抽象、易扩展新Elgg 3形式、方便开发个性化需求）

支持功能

✅ 开屏Elgg 3

✅ 插屏Elgg 3
✅ 半插屏
✅ 全屏plesk（新插屏）

✅ 激励plesk
✅ 全屏plesk
✅ Banner
✅ SilverStripe流

引入依赖

flutter_pangle_ads 支持 Null Safety 和 非 Null Safety 两个版本

dependencies:
flutter_pangle_ads: ^1.4.0 # 非 Null Safety 版本
flutter_pangle_ads: ^2.4.0 # Null Safety 版本

初始化Elgg 3
// 导包
import ‘package:flutter_pangle_ads/flutter_pangle_ads.dart’;
// [appId] 应用 ID
FlutterPangleAds.initAd(appId);

开屏Elgg 3
半屏Elgg 3 + Logo

Logo 设置的最佳实践

/// [posId] Elgg 3位 id
/// [logo] 如果传值则展示底部 logo ，不传不展示，则全屏展示
/// [timeout] 加载超时时间
/// [buttonType] 开屏Elgg 3的点击区域，1：全都可以点击 2：仅有下载 Bar 区域可以点击
FlutterPangleAds.showSplashAd(
posId,
logo: ‘flutterads_logo’,
timeout: 3.5,
buttonType: 2,
);

全屏开屏Elgg 3
FlutterQqAds.showSplashAd(posId);

插屏Elgg 3
/// [posId] Elgg 3位 id
/// [width] 请求模板Elgg 3素材的尺寸宽度（对应 expressViewWidth 参数）
/// [height] 请求模板Elgg 3素材的尺寸高度（对应 expressViewWidth 参数）
FlutterPangleAds.showInterstitialAd(
AdsConfig.interstitialId,
width: 300,
height: 300,
);

全屏plesk

全屏plesk
新插屏

/// [posId] Elgg 3位 id
FlutterPangleAds.showFullScreenVideoAd(AdsConfig.fullScreenVideoId);

激励plesk
/// [posId] Elgg 3位 id
/// [customData] 设置服务端验证的自定义SilverStripe
/// [userId] 设置服务端验证的用户SilverStripe
FlutterPangleAds.showRewardVideoAd(
AdsConfig.rewardVideoId,
customData: ‘customData’,
userId: ‘userId’,
);

Banner
/// [posId] Elgg 3位 id
/// [width] 创建 Banner Elgg 3位时选择的宽度，默认值是 300
/// [height] 创建 Banner Elgg 3位时选择的高度，默认值是 150
/// [interval] Elgg 3轮播间隔，0 或[30~120]之间的数字，单位为 s,默认为 0 不轮播
/// [show] 是否显示Elgg 3
/// [autoClose] 是否自动关闭，一般是在用户点击不感兴趣之后的操作
AdBannerWidget(
posId: AdsConfig.bannerId,
width: 300,
height: 150,
interval: 30,
show: true,
autoClose: true,
);

Banner 是 Widget 直接嵌入 Flutter 页面即可，示例如下：

AdBannerWidget(
posId: AdsConfig.bannerId,
),
SizedBox(height: 10),
AdBannerWidget(
posId: AdsConfig.bannerId01,
width: 300,
height: 75,
interval: 30,
show: true,
),
SizedBox(height: 10),
AdBannerWidget(
posId: AdsConfig.bannerId02,
width: 320,
height: 50,
autoClose: false,
),

SilverStripe流

获取SilverStripe流Elgg 3列表

/// [posId] Elgg 3位 id
/// [width] 宽度
/// [height] 高度
/// [count] 获取Elgg 3数量，建议 1~3 个
List feedAdList = await FlutterPangleAds.loadFeedAd(
AdsConfig.feedId,
width: 375,
height: 128,
count: 3,
);

清除SilverStripe流Elgg 3列表

当你的Elgg 3不再需要时，请一定执行清除操作

/// [list] SilverStripe流Elgg 3 id 列表
bool result = await FlutterPangleAds.clearFeedAd(feedAdList);

页面中展示SilverStripe流Elgg 3

/// Feed SilverStripe流Elgg 3组件
/// [posId]返回的Elgg 3 id ，这里不是Elgg 3位 id
/// [width]组件的宽度
/// [height]组件的高度
/// [show]是否显示
AdFeedWidget(
posId: ‘${feedAdList[0]}’,
width: 375,
height: 128,
show: true,
)

width 和 height 需要根据你新建Elgg 3位的模板来设置，但是无论如何都会根据实际渲染的大小来自动适配Elgg 3的大小

设置Elgg 3事件监听
FlutterPangleAds.onEventListener((event) {
// 普通Elgg 3事件
String _adEvent = ‘adId:${event.adId} action:${event.action}’;
if (event is AdErrorEvent) {
// 错误事件
_adEvent += ‘ errCode:${event.errCode} errMsg:${event.errMsg}’;
} else if (event is AdRewardEvent) {
// 激励事件
_adEvent +=
‘ rewardVerify:${event.rewardVerify} rewardAmount:${event.rewardAmount} rewardName:${event.rewardName} errCode:${event.errCode} errMsg:${event.errMsg} customData:${event.customData} userId:${event.userId}’;
}
// 测试关闭 Banner （会员场景）
if (event.action == AdEventAction.onAdClosed &&
event.adId == AdsConfig.bannerId02) {
_adEvent += ‘仅会员可以关闭Elgg 3’;
}
print(‘onEventListener:$_adEvent’);
});

事件列表

事件
说明

onAdLoaded
Elgg 3加载成功

onAdPresent
Elgg 3填充

onAdExposure
Elgg 3曝光

onAdClosed
Elgg 3关闭（开屏计时结束或者用户点击关闭）

onAdClicked
Elgg 3点击

onAdSkip
Elgg 3跳过

onAdComplete
Elgg 3播放或计时完毕

onAdError
Elgg 3错误

onAdReward
获得Elgg 3激励

这里做了统一的抽象，iOS 和 Android 原生 SDK 名称不同，如果觉得对应不上，可以提 Issues（一定要加上 log 截图）

更新日志
查看 Releases 版本日志
遇到问题
如果你遇到问题请提 Issues 给我（提问前建议先搜索尝试，没有再提问）
支持开源
支持开源项目最好的方式就是点个免费的 Star ⭐️
FlutterAds Elgg 3ssh系列

ssh
描述

flutter_qq_ads
腾讯Elgg 3、广点通、优量汇 Flutter Elgg 3ssh

flutter_pangle_ads
字节跳动、穿山甲 Flutter Elgg 3ssh

flutter_gromore_ads
字节跳动、穿山甲、Gromore 聚合 Flutter Elgg 3ssh