Flutter广告展示插件ndmob的使用
Flutter广告展示插件Ndmob的使用
本README描述了插件的使用方法。如果您将此插件发布到pub.dev,此README的内容将出现在您的插件首页。
提示
我非常无聊,所以我创建了一个简单的Admob横幅广告仅供我个人使用。请不要在生产环境中使用这段糟糕的代码。
功能
TODO: 需要添加更多功能如RewardedBanner、RewardedInterstitialBanner等…
开始使用
要使用此插件,请运行以下命令:
flutter pub add google_mobile_ads
使用方法
在main.dart
文件中添加以下代码:
void main() {
WidgetsFlutterBinding.ensureInitialized(); // 确保WidgetsFlutterBinding已经初始化
MobileAds.instance.initialize(); // 初始化MobileAds实例
Ndmob.init(AdmobManager(
adUnitId: "ca-app-pub-3940256099942544~3347511713", // 广告单元ID
bannerAdUnitIdAndroid: "ca-app-pub-3940256099942544/6300978111", // Android平台的横幅广告单元ID
bannerAdUnitIdIOS: "ca-app-pub-3940256099942544/2934735716", // iOS平台的横幅广告单元ID
nativeAdUnitIdAndroid: "ca-app-pub-3940256099942544/1033173712", // Android平台的原生广告单元ID
nativeAdUnitIdIOS: "ca-app-pub-3940256099942544/4411468910", // iOS平台的原生广告单元ID
interstitialAdUnitIdAndroid: "ca-app-pub-3940256099942544/2247696110", // Android平台的插屏广告单元ID
interstitialAdUnitIdIOS: "ca-app-pub-3940256099942544/3986624511", // iOS平台的插屏广告单元ID
));
runApp(const MaterialApp(
home: const MyWidget(), // 主页面
));
}
如何使用Ndmob横幅广告
在您的MyWidget
类中添加以下代码:
import 'package:ndmob/ndmob.dart'; // 导入Ndmob包
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Ndmob.adBanner(adFailedWidget: const Text("Empty Ads")), // 显示横幅广告
const SizedBox(height: 32), // 添加间距
Ndmob.adNative(), // 显示原生广告
const SizedBox(height: 32), // 添加间距
ElevatedButton(
onPressed: () {
Ndmob.showAdInterstitial(); // 显示插屏广告
},
child: const Icon(Icons.fullscreen), // 按钮图标
),
],
),
),
);
}
}
更多关于Flutter广告展示插件ndmob的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter广告展示插件ndmob的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中集成和使用ndmob
广告展示插件的示例代码案例。ndmob
是一个用于在Flutter应用中展示广告的插件,支持多种广告格式。
1. 添加依赖
首先,你需要在pubspec.yaml
文件中添加ndmob
的依赖:
dependencies:
flutter:
sdk: flutter
ndmob: ^最新版本号 # 请替换为实际最新版本号
然后运行flutter pub get
来安装依赖。
2. 配置Android
在android/app/src/main/AndroidManifest.xml
文件中添加必要的权限和广告配置。例如:
<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"/>
<!-- ndmob广告配置 -->
<meta-data
android:name="com.ndmob.SDK_KEY"
android:value="你的NDMob SDK Key"/>
<!-- 其他配置 -->
</manifest>
3. 配置iOS
如果你还打算在iOS上展示广告,你需要在ios/Runner/Info.plist
文件中添加一些配置。不过,ndmob
的具体iOS配置可能因版本而异,请参考官方文档进行配置。
4. 初始化并展示广告
在你的Flutter应用中,你需要初始化ndmob
并展示广告。以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:ndmob/ndmob.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isAdLoaded = false;
@override
void initState() {
super.initState();
// 初始化NDMob广告
NDMob.initialize(
sdkKey: "你的NDMob SDK Key",
listener: (NDMobEvent event) {
if (event is NDMobAdLoadedEvent) {
setState(() {
isAdLoaded = true;
});
} else if (event is NDMobAdFailedToLoadEvent) {
print("广告加载失败: ${event.error}");
} else if (event is NDMobAdClickedEvent) {
print("广告被点击");
} else if (event is NDMobAdClosedEvent) {
print("广告被关闭");
}
},
);
// 加载广告
NDMob.loadBannerAd(
unitId: "你的Banner广告单元ID",
adSize: NDMobAdSize.banner, // 或者其他尺寸
anchor: AnchorType.bottom, // 广告的锚点位置
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'你正在使用NDMob广告插件',
),
SizedBox(height: 20),
if (isAdLoaded)
Container(
height: 50, // 根据你的广告尺寸调整
width: AdSize.banner.width.toDouble(), // 或者使用NDMobAdSize中定义的尺寸
child: AdWidget(
adUnitId: "你的Banner广告单元ID",
adType: AdType.banner,
),
)
else
CircularProgressIndicator(),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 展示全屏广告(如果已加载)
NDMob.showInterstitialAd(unitId: "你的全屏广告单元ID");
},
tooltip: '展示全屏广告',
child: Icon(Icons.monetization_on),
),
);
}
}
注意事项
- SDK Key和广告单元ID:你需要替换代码中的
你的NDMob SDK Key
和你的广告单元ID
为实际的值。 - 广告尺寸:根据你的需求调整广告尺寸和位置。
- 事件监听:你可以根据需要添加更多的事件监听,例如广告展示完成、用户点击广告后的行为等。
希望这个示例代码能够帮助你在Flutter项目中成功集成并使用ndmob
广告展示插件。