Flutter广告集成插件flutter_ads_plugin的使用
Flutter广告集成插件 flutter_ads_plugin
的使用
flutter_ads_plugin
是一个简化了 Google Ads 集成的 Flutter 插件。通过这个插件,您可以快速地在您的应用中部署多种类型的广告,如 Banner 广告、插页式广告、奖励视频广告和原生广告等。
快速开始
安装
首先,在您的 pubspec.yaml
文件中添加 flutter_ads_plugin
:
dependencies:
flutter_ads_plugin: ^<latest-version>
然后运行以下命令来获取依赖包:
flutter pub get
初始化
在您的 main.dart
文件中初始化 Mobile Ads SDK:
import 'package:flutter/material.dart';
import 'package:flutter_ads_plugin/flutter_ads_plugin.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(const MyApp());
}
使用示例
下面是一个完整的示例,展示了如何显示不同类型的广告:
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// 显示奖励视频广告
void showRewardedAd() {
FlutterAdsRewarded.show(
androidId: 'YOUR_ANDROID_REWARDED_AD_ID',
iosId: 'YOUR_IOS_REWARDED_AD_ID',
onUserEarnedReward: (view, item) {
// 用户获得奖励时的处理逻辑
},
onError: (e) {
// 错误处理逻辑
},
onClose: () {
// 广告关闭时的处理逻辑
},
);
}
// 显示插页式广告
void showInterstitialAd() {
FlutterAdsInterstitial.show(
androidId: 'YOUR_ANDROID_INTERSTITIAL_AD_ID',
iosId: 'YOUR_IOS_INTERSTITIAL_AD_ID',
onError: (e) {
// 错误处理逻辑
},
onClose: () {
// 广告关闭时的处理逻辑
},
);
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
const SizedBox(height: 24),
// 显示横幅广告
const FlutterAdsBanner(
iosId: 'YOUR_IOS_BANNER_AD_ID',
androidId: 'YOUR_ANDROID_BANNER_AD_ID',
),
const SizedBox(height: 24),
// 显示原生广告
const FlutterAdsNative(
androidId: 'YOUR_ANDROID_NATIVE_AD_ID',
iosId: 'YOUR_IOS_NATIVE_AD_ID',
templateStyle: null,
factoryId: null,
constraints: null,
),
ElevatedButton(
onPressed: showRewardedAd,
child: const Text('Show Rewarded Ad')),
const SizedBox(height: 24),
ElevatedButton(
onPressed: showInterstitialAd,
child: const Text('Show Interstitial Ad')),
],
),
),
);
}
}
更多关于Flutter广告集成插件flutter_ads_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter广告集成插件flutter_ads_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中集成并使用flutter_ads_plugin
插件的代码示例。这个插件允许你在Flutter应用中展示广告,比如横幅广告(Banner Ads)和插屏广告(Interstitial Ads)。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加flutter_ads_plugin
依赖:
dependencies:
flutter:
sdk: flutter
flutter_ads_plugin: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 配置Android和iOS广告平台
Android
在android/app/src/main/AndroidManifest.xml
中添加必要的权限和广告平台配置(例如,对于AdMob):
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<!-- 添加必要的权限 -->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application
... >
<!-- AdMob App ID -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx"/>
...
</application>
</manifest>
iOS
在ios/Runner/Info.plist
中添加AdMob App ID配置:
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string>
确保在Xcode中启用了必要的广告追踪权限。
3. 初始化插件并展示广告
在你的Flutter代码中,你需要初始化插件并展示广告。下面是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:flutter_ads_plugin/flutter_ads_plugin.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
BannerAd? _bannerAd;
InterstitialAd? _interstitialAd;
@override
void initState() {
super.initState();
_initAds();
}
void _initAds() async {
// 初始化BannerAd
String bannerAdUnitId = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
_bannerAd = BannerAd.create(adUnitId: bannerAdUnitId, size: AdSize.banner);
_bannerAd?.load();
// 初始化InterstitialAd
String interstitialAdUnitId = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
_interstitialAd = InterstitialAd.create(adUnitId: interstitialAdUnitId);
_interstitialAd?.load();
// 监听广告加载完成事件
_bannerAd?.addAdEventListener(
AdEvent.loaded,
() {
// 可以在这里将广告添加到布局中
print("Banner ad loaded.");
},
);
_interstitialAd?.addAdEventListener(
AdEvent.loaded,
() {
print("Interstitial ad loaded.");
},
);
// 监听广告显示完成事件
_interstitialAd?.addAdEventListener(
AdEvent.closed,
() {
// 重新加载插屏广告
_interstitialAd?.load();
print("Interstitial ad closed. Reloading...");
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Ads Example"),
),
body: Column(
children: [
// 显示横幅广告
if (_bannerAd?.isLoaded() ?? false)
Container(
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
SizedBox(height: 20),
Center(
child: ElevatedButton(
onPressed: () {
// 显示插屏广告
if (_interstitialAd?.isLoaded() ?? false) {
_interstitialAd?.show();
} else {
print("Interstitial ad is not loaded yet.");
}
},
child: Text("Show Interstitial Ad"),
),
),
],
),
);
}
}
注意事项
- 广告单元ID:确保你使用的是真实的广告单元ID,而不是示例ID。
- 测试设备:在开发阶段,你可以使用AdMob的测试广告单元ID来避免产生真实的广告费用。
- 权限处理:确保你的应用有处理网络权限的权限声明。
- 错误处理:在实际应用中,你可能需要添加更多的错误处理和日志记录。
这个示例展示了如何在Flutter应用中集成横幅广告和插屏广告。你可以根据需要进一步扩展和自定义广告展示逻辑。