将广告添加到您的移动 Flutter 应用或游戏中
- 1. 获取 AdMob 应用 ID
- 2. 平台特定的设置
- 3. 添加 google_mobile_ads 插件
- 4. 初始化移动广告 SDK
- 5. 加载横幅广告
- 6. 显示横幅广告
- 7. 配置广告
- 8. 最后润色
- 9. 完整示例
许多开发者使用广告来实现其移动应用和游戏的盈利。这使得他们的应用可以免费下载,从而提高应用的流行度。
要将广告添加到您的 Flutter 项目中,请使用 AdMob,Google 的移动广告平台。此食谱演示了如何使用 google_mobile_ads
包将横幅广告添加到您的应用或游戏中。
1. 获取 AdMob 应用 ID
#访问 AdMob 并设置一个帐户。这可能需要一些时间,因为您需要提供银行信息、签署合同等。
准备好 AdMob 帐户后,在 AdMob 中创建两个应用:一个用于 Android,一个用于 iOS。
打开应用设置部分。
获取 Android 应用和 iOS 应用的 AdMob 应用 ID。它们类似于
ca-app-pub-1234567890123456~1234567890
。请注意两个数字之间的波浪号 (~
)。
2. 平台特定的设置
#更新您的 Android 和 iOS 配置以包含您的应用 ID。
Android
#将您的 AdMob 应用 ID 添加到您的 Android 应用中。
打开应用的
android/app/src/main/AndroidManifest.xml
文件。添加一个新的
<meta-data>
标签。将
android:name
元素设置为com.google.android.gms.ads.APPLICATION_ID
。将
android:value
元素设置为您在上一步中获得的自己的 AdMob 应用 ID。将其包含在引号中,如所示xml<manifest> <application> ... <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 --> <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/> </application> </manifest>
iOS
#将您的 AdMob 应用 ID 添加到您的 iOS 应用中。
打开您的应用的
ios/Runner/Info.plist
文件。将
GADApplicationIdentifier
括在key
标签中。将您的 AdMob 应用 ID 括在
string
标签中。您在 步骤 1 中创建了此 AdMob 应用 ID。xml<key>GADApplicationIdentifier</key> <string>ca-app-pub-################~##########</string>
3. 添加 google_mobile_ads
插件
#要将 google_mobile_ads
插件作为依赖项添加,请运行 flutter pub add
flutter pub add google_mobile_ads
4. 初始化移动广告 SDK
#在加载广告之前,您需要初始化移动广告 SDK。
调用
MobileAds.instance.initialize()
来初始化移动广告 SDK。dartvoid main() async { WidgetsFlutterBinding.ensureInitialized(); unawaited(MobileAds.instance.initialize()); runApp(MyApp()); }
在启动时运行初始化步骤,如上所示,以便 AdMob SDK 在需要之前有足够的时间进行初始化。
5. 加载横幅广告
#要显示广告,您需要从 AdMob 请求它。
要加载横幅广告,请构造一个 BannerAd
实例,并调用其上的 load()
。
/// Loads a banner ad.
void _loadAd() {
final bannerAd = BannerAd(
size: widget.adSize,
adUnitId: widget.adUnitId,
request: const AdRequest(),
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
if (!mounted) {
ad.dispose();
return;
}
setState(() {
_bannerAd = ad as BannerAd;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, error) {
debugPrint('BannerAd failed to load: $error');
ad.dispose();
},
),
);
// Start loading.
bannerAd.load();
}
要查看完整的示例,请查看此食谱的最后一步。
6. 显示横幅广告
#获得加载的 BannerAd
实例后,使用 AdWidget
显示它。
AdWidget(ad: _bannerAd)
最好将该 widget 包裹在 SafeArea
中(这样广告的任何部分都不会被设备缺口遮挡)和 SizedBox
中(这样它在加载前后都有其指定的常量大小)。
@override
Widget build(BuildContext context) {
return SafeArea(
child: SizedBox(
width: widget.adSize.width.toDouble(),
height: widget.adSize.height.toDouble(),
child: _bannerAd == null
// Nothing to render yet.
? SizedBox()
// The actual ad.
: AdWidget(ad: _bannerAd!),
),
);
}
当您不再需要访问广告时,必须将其释放。调用 dispose()
的最佳实践是在 AdWidget
从 widget 树中移除后或在 BannerAdListener.onAdFailedToLoad()
回调中。
_bannerAd?.dispose();
7. 配置广告
#要显示测试广告以外的任何内容,您必须注册广告单元。
打开 AdMob。
为每个 AdMob 应用创建一个广告单元。
这会询问广告单元的格式。AdMob 提供了横幅广告之外的许多格式——插页式广告、激励式广告、应用打开广告等。这些广告的 API 类似,并在 AdMob 文档 和 官方示例 中有介绍。
选择横幅广告。
获取 Android 应用和 iOS 应用的广告单元 ID。您可以在广告单元部分找到它们。它们看起来像
ca-app-pub-1234567890123456/1234567890
。格式类似于应用 ID,但两个数字之间有一个斜杠 (/
)。这将广告单元 ID与应用 ID区分开来。根据目标应用平台,将这些广告单元 ID添加到
BannerAd
的构造函数中。dartfinal String adUnitId = Platform.isAndroid // Use this ad unit on Android... ? 'ca-app-pub-3940256099942544/6300978111' // ... or this one on iOS. : 'ca-app-pub-3940256099942544/2934735716';
8. 最后润色
#要在一个发布的应用或游戏中显示广告(而不是调试或测试场景),您的应用必须满足其他要求
您的应用必须经过审核和批准才能完全投放广告。请遵循 AdMob 的 应用准备就绪指南。例如,您的应用必须至少列在 Google Play 商店或 Apple App Store 等受支持的商店之一中。
您必须 创建
app-ads.txt
文件并在您的开发者网站上发布它。
要了解有关应用和游戏盈利的更多信息,请访问 AdMob 和 Ad Manager 的官方网站。
9. 完整示例
#以下代码实现了一个简单的有状态 widget,它加载横幅广告并显示它。
import 'dart:io';
import 'package:flutter/widgets.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
class MyBannerAdWidget extends StatefulWidget {
/// The requested size of the banner. Defaults to [AdSize.banner].
final AdSize adSize;
/// The AdMob ad unit to show.
///
/// TODO: replace this test ad unit with your own ad unit
final String adUnitId = Platform.isAndroid
// Use this ad unit on Android...
? 'ca-app-pub-3940256099942544/6300978111'
// ... or this one on iOS.
: 'ca-app-pub-3940256099942544/2934735716';
MyBannerAdWidget({
super.key,
this.adSize = AdSize.banner,
});
@override
State<MyBannerAdWidget> createState() => _MyBannerAdWidgetState();
}
class _MyBannerAdWidgetState extends State<MyBannerAdWidget> {
/// The banner ad to show. This is `null` until the ad is actually loaded.
BannerAd? _bannerAd;
@override
Widget build(BuildContext context) {
return SafeArea(
child: SizedBox(
width: widget.adSize.width.toDouble(),
height: widget.adSize.height.toDouble(),
child: _bannerAd == null
// Nothing to render yet.
? SizedBox()
// The actual ad.
: AdWidget(ad: _bannerAd!),
),
);
}
@override
void initState() {
super.initState();
_loadAd();
}
@override
void dispose() {
_bannerAd?.dispose();
super.dispose();
}
/// Loads a banner ad.
void _loadAd() {
final bannerAd = BannerAd(
size: widget.adSize,
adUnitId: widget.adUnitId,
request: const AdRequest(),
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
if (!mounted) {
ad.dispose();
return;
}
setState(() {
_bannerAd = ad as BannerAd;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, error) {
debugPrint('BannerAd failed to load: $error');
ad.dispose();
},
),
);
// Start loading.
bannerAd.load();
}
}
除非另有说明,否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-06-24。 查看源代码 或 报告问题。