Flutter广告集成插件google_mobile_ads_ext的使用
Flutter广告集成插件google_mobile_ads_ext的使用
如果您使用的是 google_mobile_ads,可能会注意到它仍然缺少一些AdMob功能。
这个插件是为了填补这些功能缺失,直到 google_mobile_ads
实现它们。
前提条件
您应该添加并设置 google_mobile_ads。
开始使用
要在您的 pubspec.yaml
文件中作为依赖项添加 google_mobile_ads_ext
:
dependencies:
google_mobile_ads_ext: ^最新版本号
然后运行 flutter pub get
来获取新包。
特性
目前,该插件支持视频广告音量控制。但您可以欢迎提交PR以实现其他所需的功能。
全局设置
在原生SDK中,您可以控制视频广告的音量和静音状态。
视频广告音量控制
插件提供了以下方法:
setAppVolume()
- 用于向Mobile Ads SDK报告相对应用音量。setAppMuted()
- 用于通知SDK应用音量已被静音。
使用方法
您可以直接调用静态方法,例如:
await GoogleMobileAdsExt.setAppMuted(true);
或者使用扩展方法对 MobileAds
(确保导入库):
import 'package:google_mobile_ads_ext/google_mobile_ads_ext.dart';
// 一些代码
await MobileAds.instance.setAppVolume(true);
这取决于您的偏好。
示例代码
以下是一个完整的示例代码,展示了如何使用 google_mobile_ads_ext
插件来控制视频广告的音量和静音状态。
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:google_mobile_ads_ext/google_mobile_ads_ext.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _value = 1;
bool _muted = false;
bool _pending = false;
[@override](/user/override)
Widget build(BuildContext context) {
final nextVal = _value == 1 ? .5 : 1.0;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('插件示例应用'),
),
body: Builder(
builder: (context) {
Widget res = Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text(_muted ? '取消静音' : '静音'),
onPressed: () async {
final val = !_muted;
await GoogleMobileAdsExt.setAppMuted(val);
// 可选:
// await MobileAds.instance.setAppMuted(val);
setState(() {
_muted = val;
});
},
),
ElevatedButton(
child: Text('设置音量 $nextVal'),
onPressed: () async {
await GoogleMobileAdsExt.setAppVolume(nextVal);
// 可选:
// await MobileAds.instance.setAppVolume(val);
_showMessage(context, '音量已设置为 $nextVal');
setState(() {
_value = nextVal;
});
},
),
ElevatedButton(
child: const Text('显示广告'),
style: TextButton.styleFrom(
backgroundColor: Colors.yellowAccent,
primary: Colors.black54,
),
onPressed: _showAds,
),
],
),
);
if (_pending) {
res = Stack(
children: [
res,
_buildPending(context),
],
);
}
return res;
},
),
),
);
}
Widget _buildPending(BuildContext context) {
return Stack(
children: const [
Opacity(
opacity: 0.3,
child: ModalBarrier(dismissible: false, color: Colors.grey),
),
Center(
child: CircularProgressIndicator(),
),
],
);
}
Future<void> _showAds() async {
_setPending(true);
// 插屏视频广告:
const adId = 'ca-app-pub-3940256099942544/8691691433';
await InterstitialAd.load(
adUnitId: adId,
request: const AdRequest(),
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) => _setPending(false),
);
ad.show();
},
onAdFailedToLoad: (error) => _setPending(false),
),
);
}
void _showMessage(BuildContext context, String message) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(message),
duration: const Duration(seconds: 1),
));
}
void _setPending(bool value) {
setState(() {
_pending = value;
});
}
}
更多关于Flutter广告集成插件google_mobile_ads_ext的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter广告集成插件google_mobile_ads_ext的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter应用中集成和使用google_mobile_ads_ext
插件来显示广告的示例代码。这个插件是google_mobile_ads
的一个扩展,提供了一些额外的功能和更精细的控制。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加google_mobile_ads_ext
依赖:
dependencies:
flutter:
sdk: flutter
google_mobile_ads: ^x.y.z # 请替换为最新版本号
google_mobile_ads_ext: ^a.b.c # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 初始化广告
在你的应用入口文件(通常是main.dart
)中初始化Mobile Ads SDK:
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:google_mobile_ads_ext/google_mobile_ads_ext.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
3. 配置广告单元ID
在你的应用中,你需要配置广告单元ID。这些ID通常是从Google AdMob控制台获取的。
final BannerAd myBanner = BannerAd(
adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
size: AdSize.banner,
request: AdRequest(
keywords: <String>['foo', 'bar'],
contentUrl: 'http://www.example.com',
// 其他请求参数...
),
listener: BannerAdListener(
onAdLoaded: () {
print('Banner Ad loaded.');
},
onAdFailedToLoad: (AdError error) {
print('Banner Ad failed to load: ${error.message}');
},
onAdOpened: () {
print('Banner Ad opened.');
},
onAdClosed: () {
print('Banner Ad closed.');
},
onAdImpression: () {
print('Banner Ad impression.');
},
),
);
4. 显示广告
在你的页面或组件中显示广告。例如,你可以在一个Column
或Stack
中放置一个AdWidget
。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
myBanner.load();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Ad Integration'),
),
body: Column(
children: <Widget>[
// 其他内容...
myBanner.isLoaded
? Center(child: AdWidget(ad: myBanner))
: Center(child: CircularProgressIndicator()),
// 其他内容...
],
),
);
}
}
5. 奖励视频广告示例
除了横幅广告,你还可以集成奖励视频广告。以下是如何加载和显示奖励视频广告的示例:
final RewardedAd myRewardedAd = RewardedAd(
adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
request: AdRequest(),
listener: RewardedAdListener(
onAdLoaded: () {
print('Rewarded Ad loaded.');
myRewardedAd.show();
},
onAdFailedToLoad: (AdError error) {
print('Rewarded Ad failed to load: ${error.message}');
},
onAdOpened: () => print('Rewarded Ad opened.'),
onAdClosed: () => print('Rewarded Ad closed.'),
onUserEarnedReward: (RewardItem reward) {
print('User earned reward. ${reward.amount} amount. ${reward.type}');
},
),
);
// 在某个按钮点击事件中加载和显示奖励视频广告
void _showRewardedAd() {
myRewardedAd.load();
}
在UI中添加一个按钮来触发_showRewardedAd
方法:
ElevatedButton(
onPressed: _showRewardedAd,
child: Text('Show Rewarded Ad'),
),
总结
以上代码展示了如何在Flutter应用中集成和使用google_mobile_ads_ext
插件来显示横幅广告和奖励视频广告。请确保你已经在Google AdMob控制台中创建了相应的广告单元,并将正确的adUnitId
替换到代码中。此外,注意处理广告加载失败的情况,并提供用户友好的反馈。